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/[email protected]/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/[email protected]/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>
Improve this question

2 Answers 2

Reset to default
1

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

Improve this answer
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)
  })
Improve this answer

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.