How do I implement buffer/readable stream in order to add a file to IPFS?

Question

I'm trying to upload a file from my directory to IPFS.

Below is what they require from API:

const files = [
  {
    path: '/tmp/myfile.txt',
    content: (Buffer or Readable stream)
  }
]

ipfs.files.add(files, function (err, files) {
  // 'files' will be an array of objects containing paths and the multihashes of the files added
})

I don't understand what they mean by "Buffer or Readable stream." More specifically, I'm not sure how to implement it correctly because I haven't done it before.

What is the difference between "path" and "content"? Why do they need to be separated?

Source: https://github.com/ipfs/js-ipfs/tree/master/examples/ipfs-101

Answer 1

js-ipfs expect you to read the file into a Buffer (an array with data). Did you happen to find docs on https://github.com/ipfs/interface-ipfs-core/blob/master/SPEC/FILES.md#files-api.

You can see how to create a buffer right in the example https://github.com/ipfs/js-ipfs/blob/master/examples/ipfs-101/1.js#L18 or learn how to read a file into a Buffer in the Node.js documentation https://nodejs.org/api/fs.html#fs_fs_readfilesync_path_options

Hope this helps :)

Update: Here is a way to do it

const fs = require('fs')
const files = [
  {
    path: '/tmp/myfile.txt',
    content: fs.readFileSync('/tmp/myfile.txt')
  }
]

ipfs.files.add(files, function (err, files) {
  // 'files' will be an array of objects containing paths and the multihashes of the files added
})

Answer 2

try my answer in this question How to add a file to IPFS using the API? .

I was confused until I found this recipe from FileNation's code.

Answer 3

You need to create a buffer from the file first.

Answer 4

Here's a full example on how to upload to IPFS using a file input in the browser:

const ipfsApi = require('ipfs-api')

const ipfs = ipfsApi({
  host: 'localhost',
  port: '5001',
  protocol: 'http'
})

async function uploadFile(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => {
      const buffer = Buffer.from(reader.result)
      ipfs.add(buffer)
      .then(files => {
        resolve(files)
      })
      .catch(error => reject(error))
    }
    reader.readAsArrayBuffer(file)
  })
}

async function onImageChange(event) {
  const file = event.target.files[0]
  const files = await uploadFile(file)
  const multihash = files[0].hash
  console.log(multihash)
}

const file = document.querySelector('#file')

file.addEventListener('change', onImageChange)

HTML

   <input type="file" id="file" />

You'll need to browserify the JS:

browserify index.js -o dist/bundle.js