Lesson 14: Metadata is not uploading correctly to NFT.Storage

[SebasAran16]

Hi!

I have been trying for a whole day and could not successfully upload the metadata to NFT.Storage, I wanted to try with this site as it seem to be a more persistent way than Pinata, and I would love to get some help.

I have no problem when running the script, I do it and once I am in NFT.Storage, I can see the 3 files in there, but at the time of following the IPFS Link this is what I see:

ipfs cat /ipfs/bafyreiba3gghrjx7tyxlomgt3y772wdnts5sz4hrf5esddkka42w7o22be: unknown node type

When in the course when the link is followed, all the metadata is shown. I have imported it to my IPFS and I can see the correct dog name and description, but I can not get to see the images. I would like to know if this is correct, but I think it is not.

My code is the same one as in the repo, so it should be ok.

// Import the NFTStorage class and File constructor from the 'nft.storage' package
const { NFTStorage, File } = require("nft.storage");
const mime = require("mime");
const fs = require("fs");
const path = require("path");
require("dotenv").config();

const NFT_STORAGE_KEY = process.env.NFT_STORAGE_API_KEY;

/**
 * Reads an image file from `imagePath` and stores an NFT with the given name and description.
 * @param {string} imagePath the path to an image file
 * @param {string} name a name for the NFT
 * @param {string} description a text description for the NFT
 */
async function storeNFTs(imagesPath) {
    const fullImagesPath = path.resolve(imagesPath);
    const files = fs.readdirSync(fullImagesPath);
    let responses = [];
    console.log("Uploading to NFT.Storage...");
    for (fileIndex in files) {
        console.log(`Working on #${fileIndex}`);
        const image = await fileFromPath(
            `${fullImagesPath}/${files[fileIndex]}`
        );
        const nftstorage = new NFTStorage({ token: NFT_STORAGE_KEY });
        const dogName = files[fileIndex].replace(".png", "");
        const response = await nftstorage.store({
            image,
            name: dogName,
            description: `An adorable ${dogName}`,
            // Currently doesn't support attributes 😔
            // attributes: [{ trait_type: "cuteness", value: 100 }],
        });
        responses.push(response);
    }
    return responses;
}

/**
 * A helper to read a file from a location on disk and return a File object.
 * Note that this reads the entire file into memory and should not be used for
 * very large files.
 * @param {string} filePath the path to a file to store
 * @returns {File} a File object containing the file content
 */
async function fileFromPath(filePath) {
    const content = await fs.promises.readFile(filePath);
    const type = mime.getType(filePath);
    return new File([content], path.basename(filePath), { type });
}

module.exports = {
    storeNFTs,
};

Thank you very much. I am waiting actively to an answer

Update: While reading the docs, I saw the image was just the link to the IPFS link where the image is stored, and I could access to it already with the CID got from the IPFS Desktop, I would like to know why I get the message copied above when I follow the IPFS URL link form NFT.Storage and not the NFT Uri, thanks!

[krakxn]

@alymurtazamemon

[alymurtazamemon]

@SebasAran16 Provide me your metadata URI, I will check.

[SebasAran16]

I will take URI as the data I uploaded to NFT.Storage. Please let me know if I am wrong, the thing is that I do not have it as Patrick has uploaded the data in Pinata, as he uploaded the photo, name and description, he has the a JSON in the URL, I got the data itself:

CIDs: 1) bafyreiba3gghrjx7tyxlomgt3y772wdnts5sz4hrf5esddkka42w7o22be, 2) bafyreifto6b6mnmdldfgjdnl7s4xtqiy2y3sxdzeofto4t7kabirethnqa and 3) bafyreiflh4wjd2shgk2kguff5gl5uv6ifpdszfgfep2itve3tdzqugx7mu

Thank you very much! I am just trying to find the function that returns the URIs in NFT.Storage so I can put it in the handleTokenUris() function

[SebasAran16]

Hey! Little update: Problem solved! I read all the NFT.Storage docs and ended up finding this free tutorial on how to mint NFTs using NFT.Storage, I really recommend you to read it if you are deploying or want to deploy on NFT.Storage:

ipns://nftschool.dev/tutorial/minting-service/#mint-an-nft

and end up seeing that NFT.Storage does automatically save the metadata to the same CID, it is just the way of accesing to the metadata that was complicated to me, both in IPFS than in the code itself (for storing the URIs to the variable to push it to the constructor). Before seeing the course I almost got it, cause here: https://nftstorage.github.io/nft.storage/client/interfaces/lib_interface.Token.html I was trying to find a function that returned the metadata, and it was the storage function itself, which results were already saved in responses , so the only work left was accesing to the data we wanted and storing it to the variable tokenUris. I did it as well on the handleTokenUris():

async function handleTokenUris() {
    tokenUris = [];
    //Store both image and metadata in IPFS
    const responses = await storeNFTs(imagesLocation);
    for (imageUploadResponseIndex in responses) {
        //Create metadata
        //Upload the metadata
        tokenUris[imageUploadResponseIndex] =
            responses[imageUploadResponseIndex].url;
        console.log(
            `Saved the URI for the ${responses[imageUploadResponseIndex].data.name}`
        );
    }
    console.log("All URIs got!");
    console.log(tokenUris);
    return tokenUris;
}

Really glad to have chosen to do it another way, learned a lot, and learned as well to fetch and undestand the docs and use de debugger to find the issues.
:)