0

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

1 Answer 1

0

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
                    }}
                >

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.