How to add a file with js-ipfs in the browser using Buffer and/or Stream

[fullmetal1]

The current documents (https://github.com/ipfs/interface-ipfs-core/tree/master/API/files#add) mention a data array, with two elements. A 'path', and 'content'. I want to know what the purpose of feeding a path to ipfs is when it has the file contents in the content object. I also want to know how I can use ipfs.files.add without the need for Node.js, since both Buffer and readable streams (AFAIK) are Node.js object types.

More to the point, I have a function in a webapp (client side, only html + js) with access to an ArrayBuffer variable that contains a files contents, as well as the filename for the file. What should I do to make ipfs.files.add work with what I have?

[fullmetal1]

Also once the file has been uploaded, how would I go about retrieving the multihash for later use?

[daviddias]

Hi @fullmetal1, the short answer to your question is: Did you get the chance to check js-ipfs examples, especially the transfer-files one? https://github.com/ipfs/js-ipfs/tree/master/examples/transfer-files

what the purpose of feeding a path to ipfs is when it has the file contents in the content object.

If you are adding a single file, you can leave the path as empty, but when adding a whole directory (a tree of files), we need to know the paths so that we can create the graph for you.

without the need for Node.js, since both Buffer and readable streams (AFAIK) are Node.js object types.

Both Buffer and Streams have polyfills for Browser land, see:

• http://npmjs.org/readable-stream
• https://www.npmjs.com/package/buffer

Any browser bundler (WebPack, Browserify and so on) will shim them for you.

Hope this helped :) Let me know!

[lidel]

It is worth mentioning that Buffer polyfill is already shipped with browserified js-ipfs-api
One can import it like this:

const Buffer = window.IpfsApi().Buffer

Example: ipfs/ipfs-firefox-addon/../quick-upload.js

[daviddias]

Right! Same for js-ipfs

https://github.com/ipfs/js-ipfs/blob/master/src/core/index.js#L54-L62

[fullmetal1]

thanks. I managed to convert my ArrayBuffer into a Buffer with ipfs.types.Buffer(content), and now adding files is working well. I'd also like to note that I'm not likely going to be using a browser bundler. Part of the reason I'm making my program is to be as lightweight and simple as possible (ie., user loads the page, and they can get and add files as they like).

At any rate I'm again making progress. Thanks for the help

[flyingzumwalt]

This issue was moved to https://discuss.ipfs.io/t/how-to-add-a-file-with-js-ipfs-in-the-browser-using-buffer-and-or-stream/255