How to upload images to IPFS using (Infura.io) `Dedicated` Gateways ⛓️
Tags: web3, tutorial, javascript, webdev
Published: 2022-08-13 00:02:00

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


![Unauthorized Error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/05mezyegdz4o0kgjtc9d.JPG)

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

![deprecation of the public API](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n3zwilgeybytnuv5l9t5.JPG)

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](https://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.


![Infura Pricing Plan](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sg80bpns23xm5m37nixf.JPG)

---

## 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.

![Creating a new project](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qoqtpqlf1n0irgvqudnh.JPG)

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.

![Project Summary](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fuinmm6v43dkfj4zhxjh.JPG)

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


![Dedicated Gateways](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/svj0c02dfkgiml7ierdv.JPG)

**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`


![Quotas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tgjs8ktsuqy8h6w1vbmg.JPG)

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_`


![Environment Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lo6zvv6bgom2w5vx0jdm.JPG)

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 &#8595;.

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

we will write this code &#8595;.

```js
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](https://docs.infura.io/infura/networks/ipfs/how-to/make-requests#ipfs-http-client:~:text=%27QmWtBbpKST49AQFLx8HAdwwjUu7HBP2wrtAH1x8df5qrVm%27%5D%7D-,ipfs%2Dhttp%2Dclient,-Use%20the%20official) 
**`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 &#8595;.

```js
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. 🤍