Lesson 14: Upload to Pinata MetaData error

[shashikant-burnwal]

Hi All,

For lesson 14, the Random IPFS NFT exercise, I programmatically uploaded images to Pinata and after that also pushed metadata to Pinata. It successfully generated CID for all Store Token URIs. But when I am checking the IPFS link, it is not showing me JSON metadata. Why is that so? Please advise.
I am adding screenshots and codes for uploadToPinata and 02-deploy-random-ipfs.nft.js

1. 02-deploy-random-ipfs.nft.js:
`const { network, ethers, getNamedAccounts } = require('hardhat')
const { developmentChains, networkConfig } = require('../helper-hardhat-config')

const { storeImages, storeTokenUriMetaData } = require('../utils/uploadToPinata')

const imagesLocation = './images/randomNft'

const FUND_AMOUNT = '1000000000000000000000'

const metadataTemplate = {
name: '',
description: '',
image: '',
attributes: [
{
trait_type: 'Adorability',
value: 100,
},
],
}

module.exports = async ({ deployments, getNamedAccounts }) => {
const { deploy, log } = deployments
const { deployer } = await getNamedAccounts()

const chainId = network.config.chainId

//get the hashes of our images

// 1. With our own IPFS Node. https://docs.ipfs.io/
// 2. pinata https://www.pinata.cloud/  (We will implement this)
// 3. nft.storage https://nft.storage/

let tokenUris

if (process.env.UPLOAD_TO_PINATA == 'true') {
    tokenUris = await handleTokenUris()
}

let vrfCoordinatorV2Address, subscriptionId

if (developmentChains.includes(network.name)) {
    const vrfCoordinatorV2Mock = await ethers.getContract('VRFCoordinatorV2Mock')

    vrfCoordinatorV2Address = vrfCoordinatorV2Mock.address

    const tx = await vrfCoordinatorV2Mock.createSubscription()
    const txReceipt = await tx.wait(1)
    subscriptionId = txReceipt.events[0].args.subId
    //Fund the subscription
    //Our mock makes it so we do not ahve actually have to worry about sending fund

    await vrfCoordinatorV2Mock.fundSubscription(subscriptionId, FUND_AMOUNT)
} else {
    vrfCoordinatorV2Address = networkConfig[chainId].vrfCoordinatorV2
    subscriptionId = networkConfig[chainId].subscriptionId
}

log('------------------------------')

// const args = [
//     vrfCoordinatorV2Address,
//     subscriptionId,
//     networkConfig[chainId]["gasLane"],
//     networkConfig[chainId]["callbackGasLimit"],
//     networkConfig[chainId]["mintFee"],
//     //dogTokenUris
// ]

}

async function handleTokenUris() {
let tokenUris = []

//store the images in IPFS
//Store the metadata in IPFS

const { responses: imageUploadResponses, files } = await storeImages(imagesLocation)

for (imageUploadResponseIndex in imageUploadResponses) {
    // create metadata

    // upload metadata
    let tokenUriMetadata = { ...metadataTemplate }

    //pug.png, st-berenard.png

    tokenUriMetadata.name = files[imageUploadResponseIndex].replace('.png', '')
    tokenUriMetadata.description = `An adorbale ${tokenUriMetadata.name} puppy!`
    tokenUriMetadata.image = `ipfs://${imageUploadResponses[imageUploadResponseIndex].IpfsHash}`

    console.log(`Uploading ${tokenUriMetadata.name}...`)

    //store the json/file to pinata

    const metadataUploadResponse = await storeTokenUriMetaData(tokenUriMetadata)

    console.log(`ipfsHash: ${metadataUploadResponse.IpfsHash}`)

    tokenUris.push(`ipfs://${metadataUploadResponse.IpfsHash}`)
}

console.log('Token URIs uploaded....')
console.log(tokenUris)

return tokenUris

}

module.exports.tags = ['all', 'randomipfs', 'main']`

2. uploadToPinata.js code:
`const pinataSDK = require('@pinata/sdk')
const path = require('path')

const fs = require('fs')

require('dotenv').config()

const pinataApiKey = process.env.PINATA_API_KEY
const pinataApiSecret = process.env.PINATA_API_SECRET
const pinata = pinataSDK(pinataApiKey, pinataApiSecret)

async function storeImages(imagesFilePath) {
const fullImagesPath = path.resolve(imagesFilePath)
const files = fs.readdirSync(fullImagesPath)
console.log(files)
let responses = []

console.log('Uploading to Pinata!')

for (fileIndex in files) {
    console.log(`Working on ${fileIndex}...`)
    const readableStreamForFile = fs.createReadStream(`${fullImagesPath}/${files[fileIndex]}`)

    try {
        const response = await pinata.pinFileToIPFS(readableStreamForFile)

        responses.push(response)
    } catch (err) {
        console.log(err)
    }
}

return { responses, files }

}

async function storeTokenUriMetaData(metadata) {
try {
const response = await pinata.pinJSONToIPFS(metadata)

    console.log('StroeTokenUri:', response.IpfsHash)
    return response
} catch (error) {
    console.log(error)
}

return null

}

module.exports = { storeImages, storeTokenUriMetaData }
`

3. Screenshot showing CID gets generated for individual metadata:

4. Screenshot showing metadata JSON not opening for ipfs://CID link:

[adityabhattad2021]

Try with https://ipfs.io/ipfs/<yourURI> in chrome.

[shashikant-burnwal]

It worked. Thanks

[RoboCrypter]

@shashikant-burnwal : In in your pinata uploads : Click on the eye, I have highlighted!

[shashikant-burnwal]

Yesterday it was not working and eventually showed a gateway timeout error. Today it worked. Thanks.