Error uploading file to IPFS: (readStream is not a readable stream or form data & source.on is not a function)

Question

I am trying to upload files on ipfs using pinata but getting errors.

captureFile = (e) => {
  console.log(e.target.files[0]);

  if (e.target.files[0]) {
    const file = e.target.files[0];
    const reader = new window.FileReader();
    
    reader.readAsArrayBuffer(file);
    reader.onloadend = () => {
      
      const buffer = Buffer.from(reader.result);
      const fileName = file.name;

      console.log('File Name:', fileName);
      
    
      this.setState({ 
        
        file,
        buffer,
        fileName, 
      });
    };
  }
};

async uploadImageToIPFS(buffer, fileName) {
    try {
      const { apiKey, apiSecret } = this.state;
      const pinata = new pinataSDK(apiKey, apiSecret);
  
      const options = {
        pinataMetadata: {
          name: fileName,
        },
        pinataOptions: {
          cidVersion: 0,
        },
      };
  
      // Upload the file to IPFS using the provided buffer
      const result = await pinata.pinFileToIPFS(buffer, options);
      
      console.log(result.IpfsHash);
      console.log('IPFS Hash:', result.IpfsHash);
      return result.IpfsHash;
    } catch (error) {
      console.error('Error uploading to IPFS:', error);
      throw error;
    }
  }

These are the two functions i am using the first one will capture the file and convert it into a buffer object then that buffer is passing in as an argument to a uploadImagetoIpfs function.

There are few things i have tried doing.

1. When i am passing the buffer object it is giving me this error

Error uploading to IPFS: Error: readStream is not a readable stream or form data

This error is most likely to be handle with nodejs but i am using react class component so i am bit confused about solving it this way.

2. When i am passing the file as argument

Error uploading to IPFS: TypeError: source.on is not a function

I get this error.

3. Instead of using pinFileToIPFS i used pinJSONToIPFS while passing buffer as an argument i successfully get the ipfs hash in return but when i check the hash here

https://ipfs.io/ipfs/ipfshash

i get a buffer object instead of an image.

So I am a bit confused about the right approach. I want to upload an image to ipfs and be able to see it instead of a buffer object

If there's any one would be able to help that would be great.

Thank.

Answer 1

Sorry for late reply. Yes, I can solve this problem and I wanna ask a question from you that you are using automatic IPFS or manual?

Answer 2

I believe part of the error is due to the SDK not being able to read what you're passing in (something we're updating) however you could try using the API instead

const { Readable } = require("stream");
const FormData = require("form-data");
const axios = require("axios");
const JWT = `Bearer PASTE_YOUR_JWT`

const uploadFromBuffer = async (buffer) => {
  try {
    const stream = Readable.from(buffer);
    const data = new FormData();
    data.append('file', stream, {
      filepath: 'FILENAME.png'
    })

    const res = await axios.post("https://api.pinata.cloud/pinning/pinFileToIPFS", data, {
      maxBodyLength: "Infinity",
      headers: {
          'Content-Type': `multipart/form-data; boundary=${data._boundary}`,
          Authorization: JWT
      }
    });

    console.log(res.data);
  } catch (error) {
    console.log(error);
  }
}

uploadFromBuffer()