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"
2 Answers
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
-
Thanks too much, I did not see the gateway option in the documentation. Nov 5, 2021 at 10:33
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}