How to retrieve an IPFS file/json with Pinata?

Question

I have been using Pinata API to pin new files and JSON objects in IPFS in a very easy way. I can see that the file is stored in IPFS when I access it via browser with Cloudflare: https://cloudflare-ipfs.com/ipfs/"MY_IPFS_FILE_HASH"

Answer 1

To access pinned files on IPFS via pinata (ie using pinata as a gateway, files can be pinned via whatever pining-provider), you can use their gateway: https://gateway.pinata.cloud/ipfs/{your hash}

ipfs.io has a gateway too: https://ipfs.io/ipfs/{your hash}

In a programmatic way, there are packages for various languages (for instance this for nodeJS: https://www.npmjs.com/package/js-ipfs-fetch)

Or you can run your own IPFS node and use it in a P2P way to retrieve data from other nodes, as described here: https://docs.ipfs.io/how-to/exchange-files-between-nodes/#prerequisites

Answer 2

I post the data with axios and return the response.data to the client:

 // should be in try/catch block
 const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;
        const fileRes = await axios.post(url, formData, {
          maxBodyLength: Infinity,
          headers: {
            "Content-Type": `multipart/form-data: boundary=${formData.getBoundary()}`,
            pinata_api_key: pinataApiKey,
            pinata_secret_api_key: pinataSecretApiKey,
          },
        });
        console.log("fileRes", fileRes.data);
        // we need to create formData
        return res.status(200).send(fileRes.data);

Technically, client sends image here, i run through some checks and then post the incoming data to ipfs. When client makes a POST request to this endpoint it gets fileRes.data. On client side

const res = await axios.post("/api/verify-image", { address: account, signature: signedData, bytes, contentType: file.type, fileName: file.name.replace(/.[^/.]+$/, ""), }); const data = res.data as PinataRes;

response from pinata is an object like this:

 fileRes {
  IpfsHash: 'QmbTp4n88Yjj931Gg4qz4LYLuCSdQwCv6sn5u8fzs16KsB',
  PinSize: 6908,
  Timestamp: '2022-05-20T18:36:35.110Z'
     }

Then we construct the image url and you can set it in a state:

image: ${https://gateway.pinata.cloud/ipfs/${data.IpfsHash}