[Ethereum] Upload file to IPFS from HTML page

ipfs

I am trying to upload the file to IPFS from HTML page and below is my code but I am getting below error.

Uncaught ReferenceError: Buffer is not defined

I have imported below statements

<script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script>


src="https://unpkg.com/ipfs/dist/index.min.js"
src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"
src="https://unpkg.com/ipfs/dist/index.js"
src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.js"
src="https://unpkg.com/ipfs-api/dist/index.js"
src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js"
integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB"
crossorigin="anonymous"


<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">



<script src="https://unpkg.com/ipfs-api/dist/index.min.js"></script>

<!-- loading the human-readable (not minified) version -->
<!-- loading the minified version -->
<script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.min.js"></script>

<!-- loading the human-readable (not minified) version -->
<script src="https://unpkg.com/ipfs/dist/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ipfs/dist/index.js"></script>
<script src="https://unpkg.com/ipfs-api/dist/index.js"></script>
<script src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js"
integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB"
crossorigin="anonymous"></script>

</head>

<body>

 <form action="/">
      <fieldset>
        <legend></legend>
        <input type="file" name="photo" id="photo">
        <button type="button" onclick="upload()"></button>
      </fieldset>
    </form>
    </br>
    </br>
    <a id="url"></a>
    </br>
    </br>
    <img id="output">

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>

    <script type="text/javascript">
    function upload() {

    console.log("hi");
      const reader = new FileReader();
      reader.onloadend = function() {
      console.log("2");
        const ipfs = window.IpfsApi('localhost', 5001) // Connect to IPFS
        console.log("3");
       const buf = buffer.Buffer(reader.result) // Convert data into buffer
                console.log("4");
        ipfs.files.add(buf, (err, result) => { // Upload buffer to IPFS
                        console.log("5");   
          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
    }

    </script>

</body>

</html>

Best Answer

Buffer is not a standard JavaScript type, you need to import it. See the Buffer module -- http://npmjs.com/buffer -- to learn how or check out a complete example of adding files to IPFS in the js-ipfs repo

https://github.com/ipfs/js-ipfs/tree/master/examples/exchange-files-in-browser

Related Topic