Infura Announce that their public ipfs gateway will be deprecated from Wednesday 10th August 2022. As a result of these Applications that rely on using their public ipfs gateway to upload and fetch files from ipfs will need to update their Application to support these change .

After the deprecation, infura recommend the use of a dedicated gateway to fetch files uploaded to ipfs. An important point to note is that the dedicated gateway only enable us to only fetch files that are uploaded to ipfs .it does not allows us to upload files .

so, in these article we will be looking at the new ways of fetching,uploading and pinning files to ipfs

We will be making use of a special library called ipfs-http-client which enable us handle file upload to ipfs. make sure you install the library before you proceed.

Setting Up Project on Infura
Before we proceed to uploading and fetching uploaded file, we will need to set up an ipfs project on infura. To do that signin to infura

click on the All Product section, various options will pop up, select the ipfs option after that click on the create new key button to create a new project. Another page will pop up that look like these

click on the manage key button then it takes you to these page

this is where we will get our Projectid, secret key from and it is also where activation of our dedicated gateway will take place.

Uploading Files to IPFS

At this point I expect you to have install the ipfs-http-client library.

import { create  } from "ipfs-http-client"

Infura require us to pass an authorization header that comprises of the project id and the secret key. it advisable to make these two variable an environmental varaiable.

These is the authorization Header

const auth =
    'Basic ' + Buffer.from(process.env.NEXT_PUBLIC_PROJECT_ID + ':' + process.env.NEXT_PUBLIC_SECRET_KEY).toString('base64')

now let put everything together

const client = create({
    url:"https://ipfs.infura.io:5001/api/v0/add",
    headers: {
    authorization:auth
},})

note: it is important to use these endpoint "ipfs.infura.io:5001/api/v0/add" for uploading of file s to ipfs so that your file can be automatically pinned to it and there wont be need for pinning after your file has being uploaded successfully.

Now is time to upload our file to ipfs. we will be creating a function that enable us handle these operation

 async function onChange(file) {
    try {
            const added = await client.add(
                file,
                {
                    progress:(prog)=> console.log(`received: ${prog}`)
                }
            )

        } catch (e) {
            console.log(e)
        }
    }

After successful file upload an object is returned as shown below

{
      cid: CID {
            version: 0,
           codec: 'dag-pb',
               multihash: Uint8Array(34),
               multibaseName: 'base58btc', 
                string: 'QmYw4YNHHW4MiBsbuxzK6xFTek7nvgiomiDkBZjkW3SLpa'
          }
      path: "QmYw4YNHHW4MiBsbuxzK6xFTek7nvgiomiDkBZjkW3SLpa",
      size: 268706
}

which contain a path property that serves as an identifier .

Accessing Uploaded File on Ipfs

Up until this point we have been able to successfully upload our file to ipfs it is now time to learn how to access or use those file in our application.

Before the deprecation of the infura public ipfs gateway, to access our uploaded file we append the path property of the object returned after every successfull upload to the public gateway.

But ever since the deprecation has been done, to access files that are uploaded we will need to setup a dedicated gateway that is meant for only our application, which means that only application that the gateway is setup for will be able to use it to fetch files from ipfs. unlike before where any application can use the public gateway to fetch any file uploaded to ipfs regardless of if the file was uploaded from it .

So now let setup our dedicated gateway on these page is where we will activate our dedicated gateway. scroll down and you will see a DEDICATED GATEWAYS section . click on the enable button to activate our dedicated gateway . fill in the appropriate value, then click on SAVE SUBDOMAIN if sucessfull a dedicated gateway will be generated that looks like these stev-market.infura-ipfs.io/ipfs.

To now access or use the uploaded file in our application append the path property value of the object returned after successfully uploading our file to ipfs as shown below

{
      cid: CID {
            version: 0,
           codec: 'dag-pb',
               multihash: Uint8Array(34),
               multibaseName: 'base58btc', 
                string: 'QmYw4YNHHW4MiBsbuxzK6xFTek7nvgiomiDkBZjkW3SLpa'
          }
      path: "QmYw4YNHHW4MiBsbuxzK6xFTek7nvgiomiDkBZjkW3SLpa",
      size: 268706
}

to the dedicated gateway you just generated which will then look like **https://stev-market.infura-ipfs.io/ipfs/<objectreturnedAfterUpload.path>**.

Boom all is set your are now able to fetch your file from ipfs.

congatulation on getting to the end of the article.