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

David Dias · Answer 1 · 2017-12-01T08:07:59.407

0

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

edited Dec 01 '17 at 08:07

answered Nov 30 '17 at 07:24

David Dias

166
4

Hi David, I'm a bit confused with regards to the example 1.js. I copy and pasted the code and executed it, the program returned a hash address. But when I go to that address through IPFS gateway, I only see a string of text that the code throws into the Buffer at "content" whereas I expected the program to send the file (which can be an image or video or whatever) specified in the "file" section to the IPFS. Do you know how I might do that? – potatoguy Nov 30 '17 at 07:35
Yes you do :) In order to add a file to IPFS, you need to pass a path (so that IPFS creates the graph) and the content of a file. js-ipfs won't read from disk, you have to do that step yourself.
You have to:
```
const fs = require('fs')
const buffer = fs.readFileSync('path-to-your-file')
```
and it is with that buffer that you add the file to IPFS
– David Dias Dec 01 '17 at 08:06
I've updated my answer with the code for you to try :) – David Dias Dec 01 '17 at 08:10

score 0 · Answer 2 · answered Mar 09 '18 at 09:42

0

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.

answered Mar 09 '18 at 09:42

林东吴

11
1

score 0 · Answer 3 · answered Jul 13 '18 at 13:42

0

You need to create a buffer from the file first.

answered Jul 13 '18 at 13:42

Nico Vergauwen

1,004
7
11

score 0 · Answer 4 · answered Jul 16 '18 at 09:49

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

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

4 Answers4