How to pin a file to Pinata and also pin json to Pinata using next js

Question

I am just wandering arround to find a way to pin the file to Pinata

Though I have a method to do it from server side but don't know how to do it from client side like React.js:

This is server side method

async function storeImages(imagesFilePath) {
  const fullImagesPath = path.resolve(imagesFilePath);
  const files = fs.readdirSync(fullImagesPath);
  let responses = [];
  console.log("Uploading to Pinata !!!");
  console.log("paths ", fs.createReadStream(fullImagesPath + "/" + files[0]));
  for (fileIndex in files) {
    const readableStreamForFile = fs.createReadStream(
      `${fullImagesPath}/${files[fileIndex]}`
    );
    try {
      const response = await pinata.pinFileToIPFS(readableStreamForFile);
      responses.push(response);
    } catch (error) {
      console.log(error);
    }
  }
  return { responses, files };
}
async function storeTokeUriMetadata(metadata) {
  try {
    const response = await pinata.pinJSONToIPFS(metadata);
    return response;
  } catch (error) {
    console.log(error);
  }
  return null;
}

Pinata home page: Pinata home page with some manually uploaded files

Would appreciate to help Thanks

Answer 1

This is a method that you can use to upload files from client side i.e using react.js or next.js

const sendFileToIPFS = async (fileImg) => {
        if (fileImg) {
            try {
                const formData = new FormData()
                formData.append("file", fileImg)

                const resFile = await axios({
                    method: "post",
                    url: "https://api.pinata.cloud/pinning/pinFileToIPFS",
                    data: formData,
                    headers: {
                        pinata_api_key: `${REACT_APP_PINATA_API_KEY}`,
                        pinata_secret_api_key: `${REACT_APP_PINATA_API_SECRET}`,
                        "Content-Type": "multipart/form-data",
                    },
                })

                setNftHash(resFile.data.IpfsHash)
                setTrxLoading(true)
            } catch (error) {
                console.log("Error sending File to IPFS: ")
                console.log(error)
            }
        }
    }

Call this method sendFilesToIpfs in the form's onSubmit method

<form
                    encType="multipart/form-data"
                    onSubmit={() => {
                        sendFileToIPFS
                    }}
                >