Is it possible to upload a file to IPFS using HTML's <input type="file"> tag?

Question

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

Answer 1

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

Answer 2

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
}