New Example: create and read ipfs files in browser

[carver]

Note to self. Something like:

Write this to index.js

var ipfs = require('ipfs-api')();

function store() {
  var toStore = document.getElementById('source').value;
  //TODO un-break this call:
  ipfs.add(new Buffer(toStore), function (err, res){
    if(err || !res) return console.error("ipfs add error", err, res);

    res.forEach(function(file) {
      console.log('successfully stored', file.Hash);
      display(file.Hash); 
    });
  });
}

function display(hash) {
  ipfs.cat(hash, function(err, res) {
    if(err || !res) return console.error("ipfs cat error", err, res);
    if(res.readable) {
      console.error('unhandled: cat result is a pipe', res);
    } else {
      document.getElementById('hash').innerText=hash;
      document.getElementById('content').innerText=res;
    }
  });
}

document.getElementById('store').onclick=store;

#sloppy html demo
echo '<textarea id="source"></textarea>
<button id="store">create in ipfs</button>
<div><div>found in ipfs:</div>
<div id="hash">[ipfs hash]</div>
<div id="content">[ipfs content]</div></div>
<script type="text/javascript" src="ipfs.js"></script>' > index.html

#file server
sudo npm install -g browserify http-server
npm install ipfs-api
browserify index.js > ipfs.js #do this every time you change index.js, or better: set up grunt watch
http-server -a 127.0.0.1 -p 8888

#ipfs server
export API_ORIGIN="http://localhost:8888"
ipfs daemon

Open http://localhost:8888/index.html

[aniket-kumar]

I am getting an error with it : fs.readFileSync is not a function. what to do?

[aniket-kumar]

@carver any help will be appreciated.

[carver]

It's been a while since I've looked at this. Based on my fuzzy memory, there were some security issues preventing this from going live. The code above (untested at the time, and stale by a year now) was meant to be more of a reminder of where to start when writing a doc. It wasn't ready to be an example that people can use out of the box. I'm afraid I don't have time to dedicate to making the doc "production ready" right now. Getting it working will probably require talking to the ipfs team and/or digging deeper into the ipfs code.

[aniket-kumar]

ok

[dignifiedquire]

I've just created a working example based of this: https://github.com/ipfs/js-ipfs-api/pull/315

[ColeMorton]

@dignifiedquire I've tried your example but I encounter this issue: Any ideas would be great, thanks!

[aniket-kumar]

I think this error is due to the second check on the response in the display() function. I hope that there should be a replacement of "if(!res.readable)" at "if(res.readable)". Because if it is readable, it should not throw any error. Just give it a look as i didn't write the code, i am not very sure.

[ColeMorton]

@aniket-kumar thanks. Am I right to assume that the text I stored in IPFS (ghi) should be displayed in place of [ipfs content]? Currently, it displays Object object. Is it possible to find the actual content (ghi)?

[aniket-kumar]

@ColeMorton I think you have to use JSON.parse() for that. Otherwise you can run loop to check every key of the object.

[ColeMorton]

@aniket-kumar thanks, I found the answer: https://github.com/ipfs/js-ipfs-api/issues/55.

ipfs.cat('some hash', function (err, stream) {
  var res = ''

  stream.on('data', function (chunk) {
    res += chunk.toString()
  })

  stream.on('error', function (err) {
    console.error('Oh nooo', err)    
  })

  stream.on('end', function () {
    console.log('Got:', res)
  })
})

Thanks @dignifiedquire

[lindybrits]

@aniket-kumar, what was the solution to your problem for -> "fs.readFileSync is not a function"? @dignifiedquire and @diasdavid, I am receiving this error message in the browser console. Any help would be greatly appreciated!

[JohnAllen]

When IPFS adds files in the browser where is the data written to? Browser memory or local storage and there's a fairly small limit?

[daviddias]

@JohnAllen by default it is written to IndexedDB, however, that can be changed as a repo configuration.

[daviddias]

@lindybrits I believe I answered your question through IRC at the time, but just for the record, the examples here should show you how to bundle js-ipfs-api for the browser https://github.com/ipfs/js-ipfs-api/tree/master/examples

[raineorshine]

In case this helps someone else, the buffer option helped me:

ipfs.cat(hash, { buffer: true }, (err, res) => {
  ...
}