Subir archivo a IPFS desde la página HTML

Estoy tratando de cargar el archivo a IPFS desde la página HTML y debajo está mi código, pero recibo el siguiente error.

Uncaught ReferenceError: Buffer is not defined

He importado las siguientes declaraciones

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

Respuestas (2)

Buffer no es un tipo de JavaScript estándar, debe importarlo. Consulte el módulo Buffer -- http://npmjs.com/buffer -- para aprender cómo o vea un ejemplo completo de cómo agregar archivos a IPFS en el repositorio js-ipfs

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

Coloque su secuencia de comandos en un archivo separado y use browserify para transformar la biblioteca de búfer de node.js en algo que el navegador pueda entender.

browserify index.js -o bundle.js

Y entonces tu código debería funcionar:

  const buffer = Buffer.from(reader.result)
  ipfs.add(buffer)
  .then(files => {
    console.log(files)
  })
Subir archivo a IPFS desde la página HTML
RespuestasAquíPolítica de privacidad1y, 1v