0

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>
0

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

0

Put your script in a separate file and use browserify to transform the node.js Buffer library to something the browser can understand.

browserify index.js -o bundle.js

And then your code should work:

  const buffer = Buffer.from(reader.result)
  ipfs.add(buffer)
  .then(files => {
    console.log(files)
  })

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.