Pinata IPFS's pinFileToIPFS method not accepting a user uploaded file

Question

I am working on a project (using React.js Express.js and Node.js) to convert a user uploaded image into and NFT on Ethereum blockchain and for that, I need to upload the image on an IPFS (I am using Pinata) and then use the pinata URI in the metadata to mint a new NFT. (Do let me know if I am wrong here, I am still newbie to web3)

For uploading my image onto the Pinata IPFS, I am sending the base64 string of the image from the client side to the server side and then calling the pinFileToIPFS method. This is the code of my server side file

const axios = require('axios');
const fs = require('fs');
const FormData = require('form-data');
const router = require('express').Router();
const { Readable } = require('stream');

const pinFileToIPFS = (image) => {
    const url = `https://api.pinata.cloud/pinning/pinJSONToIPFS`;
    const buffer = Buffer.from(image);
    const stream = Readable.from(buffer);
    const filename = `an-awesome-nft_${Date.now()}.png`;
    stream.path = filename;

    const formData = new FormData();
    formData.append("file", stream);

return axios.post(url,
        formData,
        {
            headers: {
                'Content-Type': `multipart/form-data; boundary= ${formData._boundary}`,
                'pinata_api_key': "*******************",
                'pinata_secret_api_key': "**********************************",
            }
        }
    ).then(function (response) {
        console.log("Success: ", response);
    }).catch(function (error) {
        console.log("Fail! ", error.response.data);
    });
};

router.route('/').post((req, res) => {
    const image = req.body.image;
    pinFileToIPFS(image);
});

module.exports = router;

Here req.body.image contains the base64 string of the user uploaded file. I have tried to convert the base64 string into a buffer and then convert the buffer into a readable stream (as done in the official Pianata documentation but for a localy file) and then wrap it up in FormData(), but I keep getting the following error.

data: {
  error: 'This API endpoint requires valid JSON, and a JSON content-type'
}

I know the problem is with the format my image/file is being sent to the API but I can't figure out. I am still a newbie to web3 and blockchains so please help!

Answer 1

There must be an error on the image parameter. A simple buffer representation of the image should work. The readable stream is not necessary.

Instead of creating the buffer, you could use middleware like express-fileupload to access the buffer representation of the file uploaded on the client-side directly.

  const file = req.files;
  const url = "https://api.pinata.cloud/pinning/pinFileToIPFS";
  const data = new FormData();
  data.append("file", file.file.data, { filepath: "anyname" });
  const result = await axios.post(url, data, {
    maxContentLength: -1,
    headers: {
      "Content-Type": `multipart/form-data; boundary=${data._boundary}`,
      pinata_api_key: process.env.PINATA_API_KEY,
      pinata_secret_api_key: process.env.PINATA_API_SECRET,
      path: "somename",
    },
  });

Answer 2

The error message is clear. You are using url that used for json file upload. this is the url you should use to upload image

  const url = `https://api.pinata.cloud/pinning/pinFileToIPFS`;

• you don't have to convert buffer to a readable stream.

• I am not sure if this is correct ${formData._boundary}. should be

  "Content-Type": `multipart/form-data: boundary=${formData.getBoundary()}`,
  

Answer 3

When you are uploading an image or file to Pinata IPFS with node js. These are the steps that even don't need Pinata Node.js SDK.

1- You can upload an image from the front end with React or Next.js. Code is given below.

const uploadAttachment = async (data, token) => {
  try {
    return await Api.post(`${ApiRoutes.upload_attachment}`, data, {
      headers: {
        Authorization: "Bearer " + token, //the token is a variable which holds the token
      },
    });
  } catch (error) {
    return {
      status: 404,
    };
  }
};

export default uploadAttachment;

2- You need to install multer to upload an image.

const multer = require("multer");
global.uploadSingleFile = multer({ dest: "uploads/" });

3- Set up your route with multer middleware and action which you are going to call.

 .post(
    "/attachments/upload",
    uploadSingleFile.single("file"),
    actions.attachments.upload.pinFileToIPFSLocal
  );

4- Last step where you will hit the Pinata endpoint with Pinata API & Secret key.

pinFileToIPFSLocal: async (req, res, next) => {
    try {
      const url = "https://api.pinata.cloud/pinning/pinFileToIPFS";
      let formData = new FormData();
      formData.append("file", JSON.stringify(req.file), req.file.originalname);

      axios
        .post(url, formData, {
          maxContentLength: -1,
          headers: {
            "Content-Type": `multipart/form-data; boundary=${formData._boundary}`,
            pinata_api_key: process.env.PINATA_API_KEY,
            pinata_secret_api_key: process.env.PINATA_API_SECRET,
            path: "somename",
          },
        })
        .then((data) => {
          console.log("Result...", data);
          return utils.response.response(
            res,
            "Upload image to ipfs.",
            true,
            200,
            data.data
          );
        })
        .catch((err) => {
          return utils.response.response(
            res,
            "Image not upload to ipfs",
            false,
            200,
            err
          );
        });
    } catch (error) {
      next(error);
    }

Answer 4

You may want to consider changing the following two lines and using the https://api.pinata.cloud/pinning/pinFileToIPFS endpoint instead:

const buffer = Buffer.from(image); -> const buffer = Buffer.from(image, "base64");

and

formData.append("file", stream); -> formData.append("file", stream, "fileNameOfChoiche.png);

Answer 5

The recommended way of interacting with Pinata, is by using their Node.JS SDK. This SDK has a pinFileToIPFS function, allows you to upload an image to their IPFS nodes in the form of a readableStream. A sample of this would look like

const fs = require('fs');
const readableStreamForFile = fs.createReadStream('./yourfile.png');
const options = {
    pinataMetadata: {
        name: MyCustomName,
        keyvalues: {
            customKey: 'customValue',
            customKey2: 'customValue2'
        }
    },
    pinataOptions: {
        cidVersion: 0
    }
};
pinata.pinFileToIPFS(readableStreamForFile, options).then((result) => {
    //handle results here
    console.log(result);
}).catch((err) => {
    //handle error here
    console.log(err);
});

However, if you are deadset on using their API endpoints and simply posting to them via axios, there is a seperate API endpoint. /pinning/pinFileToIPFS. Examples of this method can be found in their API Docs.