How to upload images to IPFS using (Infura.io) `Dedicated` Gateways ⛓️

Have you faced this error before while uploading to IPFS through the Infura.io public gateway?

This error is simply because of the deprecation of the public API, gateway since 10th August.

In this tutorial we will handle the migration from the old public API to the dedicated API while uploading.

1. Create a new account in Infura.io

After creating an account you must add an active credit card to be able to create projects inside infura.io

NOTE: The core plan will be fair enough for you as a developer and nothing will be deducted from your bank account.

2. Create a new project

While creating a new project you will be asked to select the network for the project. for this case select IPFS. Then select the name of the project.

Then you will be redirected to the project details. we will discuss each section together.

Project Summary
This section will include Project ID and API Secret key.
Remember the part of the subdomain we will use it in this article.

Dedicated Gateways
We should enable this section then enter your unique subdomain that will be the link you stored your file on.

Quotas
This section is very important to make you set a limit for this specific project and this will help you not getting the MAX LIMIT and get charged from Infura.io The MAX LIMIT for the core plan is 5 GB

Now we are done with creating the project.

3. Uploading file from code.

For security reasons we should create a .env file to save our Project ID and API Secret key.
In my case I'm working on a Next.js porject so I named the file .env.local and prefixed the environment variables with NEXT_PUBLIC_

Then in our code we should install ipfs-http-client by running this command.

npm install --save ipfs-http-client

Then instead of doing this for public gateway ↓.

const client = ipfsHttpClient('https://ipfs.infura.io:5001/api/v0');

we will write this code ↓.

import { create as ipfsHttpClient } from 'ipfs-http-client';

const projectId = process.env.NEXT_PUBLIC_IPFS_PROJECT_ID;
const projectSecret = process.env.NEXT_PUBLIC_API_KEY_SECRET;
const auth = `Basic ${Buffer.from(`${projectId}:${projectSecret}`).toString('base64')}`;

const client = ipfsHttpClient({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https',
  headers: {
    authorization: auth,
  },
});

Don't get frustrated from this code we simply went as the infura's documentation said. See the docs for more info
I used proccess.env for accessing environment variables without making them exposed to the code due to security reasons.

Then we will use the client variable that we have created to upload our file ↓.

const uploadToIPFS = async (file) => {
   const subdomain = 'https://an-nft-marketplace.infura-ipfs.io';
   try {
    const added = await client.add({ content: file });
    const URL = `${subdomain}/ipfs/${added.path}`;
    return URL;
  } catch (error) {
    console.log('Error uploading file to IPFS.');
  }
};

Be sure that the subdomain variable should be equal to the same subdomain we have created before in the Dedicated gateways section at the top.

And that's it !! You have now uploaded your file to IPFS and now accessible through the URL variable.

Hope this article helped you tackle this challenge because I this problem have bothered me too. 🤍