I'm trying to upload a file to IPFS and display the returning hash address on a browser using JavaScript and HTML. But I don't know how to handle the JavaScript API.

My HTML code:

<p id="text"> This is the IPFS address </p>

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

<button onClick="submitFile()"> Submit </button>

My JavaScript code looks something like this (assuming to be linked from an external file):

   var tempFile = document.getElementById('myFile').value;
   var nameHash;

   ipfs.add(tempFile, function(err, hash) {
      nameHash = hash;

   document.getElementById("text").innerHTML = nameHash;

I know I am missing a lot of stuff. I've been trying to read the documentation on GitHub but it just gets more confusing.

Specifically, I don't know how to manage the modules. As in, which one am I supposed to import and what do I do with them once that is done?

Reference: https://www.reddit.com/r/ipfs/comments/4cf6pe/ipfs_browser_file_upload/

Reference: https://www.npmjs.com/package/ipfs-js


There is a full example at https://github.com/ipfs/js-ipfs-api/tree/master/examples/upload-file-via-browser using the latest js-ipfs-api. The ipfs-js module you referenced seems that is not maintained for over year now.

See the form tag here: https://github.com/ipfs/js-ipfs-api/blob/master/examples/upload-file-via-browser/src/App.js#L54-L56

See how to then add the file here: https://github.com/ipfs/js-ipfs-api/blob/master/examples/upload-file-via-browser/src/App.js#L20-L41

| improve this answer | |

You can first convert your uploaded file into buffer and then upload it to IPFS using js-ipfs-api library. Below is an example of image upload to ipfs.

    function upload() {
  const reader = new FileReader();
  reader.onloadend = function() {
    const ipfs = window.IpfsApi('localhost', 5001) // Connect to IPFS
    const buf = buffer.Buffer(reader.result) // Convert data into buffer
    ipfs.files.add(buf, (err, result) => { // Upload buffer to IPFS
      if(err) {
      let url = `https://ipfs.io/ipfs/${result[0].hash}`
      console.log(`Url --> ${url}`)
      document.getElementById("url").innerHTML= url
      document.getElementById("url").href= url
      document.getElementById("output").src = url
  const photo = document.getElementById("photo");
  reader.readAsArrayBuffer(photo.files[0]); // Read Provided File
| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.