<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/ipfs-http-client/dist/index.min.js"></script>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <center>
  <h2>Upload to IPFS</h2>
  <input id="fileUpload" type="file" class="btn btn-primary">Select File</input>
  <br /><br />
  <div id="ipfs_hash"></div>
  </center>
</div>

</body>
</html>
const ipfs = window.IpfsHttpClient({ host: 'ipfs.infura.io', port: 5001 })

document.querySelector('#fileUpload').addEventListener('change', function() {

  document.getElementById("ipfs_hash").innerHTML = "<b>Uploading...Please wait</b>"
  
  var reader = new FileReader();
  reader.onload = function() {

    var arrayBuffer = this.result,
      array = new Uint8Array(arrayBuffer),
      binaryString = String.fromCharCode.apply(null, array);

    //console.log(result)
    ipfs.add(binaryString, (err, result) => {
      console.log(result)
      document.getElementById("ipfs_hash").innerHTML = "<b>IPFS Hash of uploded file: </b>"+result[0].hash 
    })
  }
  reader.readAsArrayBuffer(this.files[0]);

}, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.