2

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

submitFile(){
   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

2 Answers 2

3

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

0

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) {
        console.error(err)
        return
      }
      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
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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