<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Jaykishan Ka.Patel</title>
    <description>The latest articles on DEV Community by Jaykishan Ka.Patel (@jaykishan_kapatel).</description>
    <link>https://dev.to/jaykishan_kapatel</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2161165%2Faeb0856e-0c2c-464b-abf1-81b7a5dcbcd0.png</url>
      <title>DEV Community: Jaykishan Ka.Patel</title>
      <link>https://dev.to/jaykishan_kapatel</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/jaykishan_kapatel"/>
    <language>en</language>
    <item>
      <title>Access HTTPS APIs Behind IP Whitelisting Using Nginx Reverse Proxy in Docker</title>
      <dc:creator>Jaykishan Ka.Patel</dc:creator>
      <pubDate>Tue, 28 Oct 2025 17:27:55 +0000</pubDate>
      <link>https://dev.to/jaykishan_kapatel/access-https-apis-behind-ip-whitelisting-using-nginx-reverse-proxy-in-docker-4di9</link>
      <guid>https://dev.to/jaykishan_kapatel/access-https-apis-behind-ip-whitelisting-using-nginx-reverse-proxy-in-docker-4di9</guid>
      <description>&lt;h2&gt;
  
  
  🔒 Problem
&lt;/h2&gt;

&lt;p&gt;Have you ever faced this situation?&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;You have a local system for development,&lt;br&gt;
 but the external public cloud server IP is whitelisted to a third party API server for accessing their APIs.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://xyz.com/api" rel="noopener noreferrer"&gt;https://xyz.com/api&lt;/a&gt; is accessible only from your public server’s IP&lt;/li&gt;
&lt;li&gt;Your local system's IP is not whitelisted&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You want to call the API from local for development or testing — but the API rejects it.&lt;/p&gt;

&lt;p&gt;Let's learn how to tunnel HTTPS API requests through a whitelisted public server using Nginx reverse proxy in Docker. Perfect for local development behind IP restrictions.&lt;/p&gt;

&lt;p&gt;This post walks you through setting up a secure &lt;strong&gt;reverse proxy&lt;/strong&gt; using&lt;br&gt;
&lt;strong&gt;Nginx&lt;/strong&gt; and &lt;strong&gt;Docker&lt;/strong&gt;, complete with JWT-based authentication.&lt;/p&gt;


&lt;h2&gt;
  
  
  ⚙️ Architecture Overview
&lt;/h2&gt;

&lt;p&gt;We’ll create a reverse proxy on your public server (the one with the whitelisted IP) and your local machine will call this proxy instead of the actual API.&lt;/p&gt;

&lt;p&gt;Here's the flow:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Local System  ──────&amp;gt;  Public Server (Nginx Proxy)  ──────&amp;gt;  https://xyz.com/api
                        ↑
                        Whitelisted IP ✅
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This way, your API calls will appear to come from the public server, even when originating locally.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚙️ Step 1: Prepare the Directory Structure
&lt;/h2&gt;

&lt;p&gt;On your &lt;strong&gt;public server&lt;/strong&gt;, create a folder for the proxy setup:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;mkdir -p /opt/api-proxy/nginx
cd /opt/api-proxy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Directory layout:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;/opt/api-proxy/
├── docker-compose.yml
└── nginx/
    └── default.conf
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🐳 Step 2: Docker Compose Setup
&lt;/h2&gt;

&lt;p&gt;Here’s the Docker Compose file (&lt;code&gt;docker-compose.yml&lt;/code&gt;):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="na"&gt;version&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;3.8"&lt;/span&gt;

&lt;span class="na"&gt;services&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;api-proxy&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;nginx:alpine&lt;/span&gt;
    &lt;span class="na"&gt;container_name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;api-proxy&lt;/span&gt;
    &lt;span class="na"&gt;restart&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;unless-stopped&lt;/span&gt;
    &lt;span class="na"&gt;ports&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;8443:443"&lt;/span&gt;     &lt;span class="c1"&gt;# HTTPS port&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s2"&gt;"&lt;/span&gt;&lt;span class="s"&gt;8080:80"&lt;/span&gt;      &lt;span class="c1"&gt;# Optional HTTP port for testing&lt;/span&gt;
    &lt;span class="na"&gt;volumes&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;./nginx/default.conf:/etc/nginx/conf.d/default.conf:ro&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;./nginx/certs:/etc/nginx/certs:ro&lt;/span&gt;
    &lt;span class="na"&gt;environment&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="s"&gt;TZ=Asia/Kolkata&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧱 Step 3: Nginx Reverse Proxy Configuration
&lt;/h2&gt;

&lt;p&gt;Create the file &lt;code&gt;/opt/api-proxy/nginx/default.conf&lt;/code&gt; with the following content:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight nginx"&gt;&lt;code&gt;&lt;span class="k"&gt;server&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kn"&gt;listen&lt;/span&gt; &lt;span class="mi"&gt;80&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kn"&gt;listen&lt;/span&gt; &lt;span class="mi"&gt;443&lt;/span&gt; &lt;span class="s"&gt;ssl&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kn"&gt;server_name&lt;/span&gt; &lt;span class="s"&gt;_&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;# SSL certificates (replace with real ones if you have them)&lt;/span&gt;
    &lt;span class="kn"&gt;ssl_certificate&lt;/span&gt;     &lt;span class="n"&gt;/etc/nginx/certs/fullchain.pem&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kn"&gt;ssl_certificate_key&lt;/span&gt; &lt;span class="n"&gt;/etc/nginx/certs/privkey.pem&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kn"&gt;ssl_protocols&lt;/span&gt;       &lt;span class="s"&gt;TLSv1.2&lt;/span&gt; &lt;span class="s"&gt;TLSv1.3&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="kn"&gt;ssl_ciphers&lt;/span&gt;         &lt;span class="s"&gt;HIGH:!aNULL:!MD5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

    &lt;span class="c1"&gt;# 1️⃣ TOKEN ENDPOINT&lt;/span&gt;
    &lt;span class="kn"&gt;location&lt;/span&gt; &lt;span class="n"&gt;/token&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_pass&lt;/span&gt; &lt;span class="s"&gt;https://xyz.com/token&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;Host&lt;/span&gt; &lt;span class="s"&gt;xyz.com&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;X-Real-IP&lt;/span&gt; &lt;span class="nv"&gt;$remote_addr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;X-Forwarded-For&lt;/span&gt; &lt;span class="nv"&gt;$proxy_add_x_forwarded_for&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;X-Forwarded-Proto&lt;/span&gt; &lt;span class="nv"&gt;$scheme&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_ssl_server_name&lt;/span&gt; &lt;span class="no"&gt;on&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="kn"&gt;client_max_body_size&lt;/span&gt; &lt;span class="mi"&gt;10M&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_connect_timeout&lt;/span&gt; &lt;span class="s"&gt;30s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_send_timeout&lt;/span&gt; &lt;span class="s"&gt;60s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_read_timeout&lt;/span&gt; &lt;span class="s"&gt;60s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;# 2️⃣ API ENDPOINT&lt;/span&gt;
    &lt;span class="kn"&gt;location&lt;/span&gt; &lt;span class="n"&gt;/api/&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_pass&lt;/span&gt; &lt;span class="s"&gt;https://xyz.com/api/&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;Host&lt;/span&gt; &lt;span class="s"&gt;xyz.com&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;X-Real-IP&lt;/span&gt; &lt;span class="nv"&gt;$remote_addr&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;X-Forwarded-For&lt;/span&gt; &lt;span class="nv"&gt;$proxy_add_x_forwarded_for&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_set_header&lt;/span&gt; &lt;span class="s"&gt;X-Forwarded-Proto&lt;/span&gt; &lt;span class="nv"&gt;$scheme&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_ssl_server_name&lt;/span&gt; &lt;span class="no"&gt;on&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_pass_request_headers&lt;/span&gt; &lt;span class="no"&gt;on&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

        &lt;span class="kn"&gt;proxy_connect_timeout&lt;/span&gt; &lt;span class="s"&gt;30s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_send_timeout&lt;/span&gt; &lt;span class="s"&gt;60s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;proxy_read_timeout&lt;/span&gt; &lt;span class="s"&gt;60s&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;

    &lt;span class="c1"&gt;# 3️⃣ HEALTH CHECK&lt;/span&gt;
    &lt;span class="kn"&gt;location&lt;/span&gt; &lt;span class="n"&gt;/health&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="kn"&gt;return&lt;/span&gt; &lt;span class="mi"&gt;200&lt;/span&gt; &lt;span class="s"&gt;"OK&lt;/span&gt;&lt;span class="err"&gt;\&lt;/span&gt;&lt;span class="s"&gt;n"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
        &lt;span class="kn"&gt;add_header&lt;/span&gt; &lt;span class="s"&gt;Content-Type&lt;/span&gt; &lt;span class="nc"&gt;text/plain&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🔐 Step 4: Add SSL Certificates
&lt;/h2&gt;

&lt;p&gt;If you have a valid domain for your public server, you can issue free SSL certs with Let’s Encrypt:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;sudo &lt;/span&gt;apt &lt;span class="nb"&gt;install &lt;/span&gt;certbot python3-certbot-nginx
&lt;span class="nb"&gt;sudo &lt;/span&gt;certbot certonly &lt;span class="nt"&gt;--nginx&lt;/span&gt; &lt;span class="nt"&gt;-d&lt;/span&gt; your-public-server.com
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Then copy the certificates into:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;/opt/api-proxy/nginx/certs/fullchain.pem
/opt/api-proxy/nginx/certs/privkey.pem
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;If you don’t have a domain yet, comment out the SSL lines and use only &lt;code&gt;listen 80;&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 Step 5: Run the Proxy
&lt;/h2&gt;

&lt;p&gt;Start the container:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;&lt;span class="nb"&gt;cd&lt;/span&gt; /opt/api-proxy
docker compose up &lt;span class="nt"&gt;-d&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Check if it’s running:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker ps
curl http://&amp;lt;your-public-server-ip&amp;gt;:8080/health
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  🧪 Step 6: Test From Local System
&lt;/h2&gt;

&lt;p&gt;Once the container is up, your local machine can call the proxy instead of the real API.&lt;/p&gt;

&lt;p&gt;1️⃣ Get Token&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-k&lt;/span&gt; &lt;span class="nt"&gt;-X&lt;/span&gt; POST https://&amp;lt;public-server-domain&amp;gt;:8443/token &lt;span class="se"&gt;\&lt;/span&gt;
     &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Content-Type: application/json"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
     &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s1"&gt;'{"username":"user","password":"pass"}'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Response:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="nl"&gt;"token"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;2️⃣ Call Actual API&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-k&lt;/span&gt; &lt;span class="nt"&gt;-X&lt;/span&gt; GET https://&amp;lt;public-server-domain&amp;gt;:8443/api/data &lt;span class="se"&gt;\&lt;/span&gt;
     &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9..."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;✅ The request goes through your public server&lt;br&gt;
✅ The API sees your whitelisted IP&lt;br&gt;
✅ You will get the response locally — as if you were calling from the server&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 Conclusion
&lt;/h2&gt;

&lt;p&gt;You can now access secure APIs behind IP whitelisting from your local machine — safely and efficiently.&lt;/p&gt;

&lt;p&gt;This setup is perfect for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Developers working behind NAT or firewalls&lt;/li&gt;
&lt;li&gt;Local testing with real APIs&lt;/li&gt;
&lt;li&gt;CI/CD environments that require whitelisted access&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  ✅ Key Takeaways
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;  Use &lt;strong&gt;Docker + Nginx&lt;/strong&gt; for isolated, reproducible setups.&lt;/li&gt;
&lt;li&gt;  Always enforce &lt;strong&gt;HTTPS&lt;/strong&gt; to secure external communications.&lt;/li&gt;
&lt;li&gt;  Handle &lt;strong&gt;JWT tokens&lt;/strong&gt; securely before proxying API calls.&lt;/li&gt;
&lt;li&gt;  Perfect for developers testing &lt;strong&gt;third-party API integrations&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;




&lt;p&gt;&lt;strong&gt;Author:&lt;/strong&gt; Jaykishan KaPatel&lt;br&gt;
&lt;strong&gt;LinkedIn:&lt;/strong&gt; &lt;a href="//www.linkedin.com/in/jaykishan-kapatel"&gt;Jaykishan KaPatel&lt;/a&gt;&lt;/p&gt;

</description>
      <category>docker</category>
      <category>nginx</category>
      <category>networking</category>
      <category>api</category>
    </item>
    <item>
      <title>File Upload with Pinata’s Files API</title>
      <dc:creator>Jaykishan Ka.Patel</dc:creator>
      <pubDate>Fri, 11 Oct 2024 17:40:48 +0000</pubDate>
      <link>https://dev.to/jaykishan_kapatel/file-upload-with-pinatas-files-api-5db8</link>
      <guid>https://dev.to/jaykishan_kapatel/file-upload-with-pinatas-files-api-5db8</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/pinata"&gt;The Pinata Challenge &lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;I built a File Upload Application that leverages Pinata’s Files API to upload files to IPFS (InterPlanetary File System) and Pinata’s CDN. The application provides a seamless file-driven user experience, allowing users to upload images, documents, or any file type. Once uploaded, users can access the files via IPFS through a Pinata gateway link.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The project includes:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Creativity:&lt;/strong&gt; Handling various file types and giving users direct links to view their uploaded files on IPFS.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Performance:&lt;/strong&gt; Utilizing Pinata’s CDN to serve files quickly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Use of Underlying Technology:&lt;/strong&gt; Using Pinata SDK to handle file uploads and Express.js for the backend.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Usability and User Experience:&lt;/strong&gt; Simple HTML interface with minimal input for users.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Accessibility:&lt;/strong&gt; User-friendly interface that allows easy interaction with the application.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;Check out the live demo of the application:&lt;br&gt;
&lt;a href="http://fileupload.uksouth.cloudapp.azure.com/" rel="noopener noreferrer"&gt;Click here to try Live Demo Link&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Screenshot:&lt;br&gt;
File Upload Form&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fad95r00ems2jzorhni7j.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fad95r00ems2jzorhni7j.JPG" alt="File Upload with Pinata's API" width="800" height="501"&gt;&lt;/a&gt;&lt;br&gt;
After the file is uploaded successfully click on the "UPLOAD ANOTHER FILE" button to upload more files&lt;br&gt;
&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzskgxuy13gs2upg85nke.JPG" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzskgxuy13gs2upg85nke.JPG" alt="File Upload with Pinata's API" width="800" height="455"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  My Code
&lt;/h2&gt;

&lt;p&gt;You can view the complete source code of the project on GitHub:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/becooljacky/File-Upload-with-Pinata-s-Files-API.git
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h2&gt;
  
  
  More Technical Details
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. File Upload:&lt;/strong&gt; Users can upload any file (images, documents, videos, etc.) through a simple HTML form. Once a file is selected and submitted, the backend (built with Node.js) uses the Pinata SDK to upload the file.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;const { PinataSDK } = require("pinata-web3");

const pinata = new PinataSDK({
    pinataJwt: process.env.PINATA_JWT, 
    pinataGateway: process.env.PINATA_GATEWAY
});

async function fileUpload() {
    try {
        const file = new File(["Hello Pinata"], "TestFile.txt", { type: "text/plain" });
        const uploadResponse = await pinata.upload.file(file);
        console.log(uploadResponse); 
    } catch (error) {
        console.log(error);
    }
}

fileUpload();
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This will return an object like the following&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;IpfsHash:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;'bafybeifmho&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="err"&gt;bs&lt;/span&gt;&lt;span class="mi"&gt;7&lt;/span&gt;&lt;span class="err"&gt;aals&lt;/span&gt;&lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="err"&gt;mui&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="err"&gt;x&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="err"&gt;qiz&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="err"&gt;b&lt;/span&gt;&lt;span class="mi"&gt;6&lt;/span&gt;&lt;span class="err"&gt;ndjeob&lt;/span&gt;&lt;span class="mi"&gt;2e27&lt;/span&gt;&lt;span class="err"&gt;v&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="err"&gt;o&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="err"&gt;fqyobarelpeku'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;PinSize:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="mi"&gt;336015&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="err"&gt;Timestamp:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;'&lt;/span&gt;&lt;span class="mi"&gt;2024-10-07&lt;/span&gt;&lt;span class="err"&gt;T&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="err"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;36&lt;/span&gt;&lt;span class="err"&gt;:&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="mf"&gt;1.759&lt;/span&gt;&lt;span class="err"&gt;Z'&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. CDN Integration:&lt;/strong&gt; Once a file is successfully uploaded, the application generates a link using Pinata’s CDN (Content Delivery Network) gateway, allowing users to access their files via a fast and reliable service. This enhances performance, especially for large files.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Example of a file access link:
&lt;code&gt;https://gateway.pinata.cloud/ipfs/YourFileHash&lt;/code&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;You can check out &lt;a href="https://docs.pinata.cloud/web3/sdk/getting-started" rel="noopener noreferrer"&gt;Pinata official documentation&lt;/a&gt; for more details.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;Building this File Upload Application with Pinata's API provided valuable insights into leveraging decentralized storage systems. By combining IPFS with Pinata’s CDN, I was able to create a fast, reliable solution for uploading and accessing various file types. This project highlights the potential of decentralized technology in enhancing file accessibility and performance.&lt;/p&gt;

&lt;p&gt;Looking ahead, I'm excited to continue exploring the capabilities of Pinata and IPFS to develop even more powerful decentralized applications.&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>pinatachallenge</category>
      <category>webdev</category>
      <category>api</category>
    </item>
  </channel>
</rss>
