Uploading files on IPFS Infura

Question

I am trying to make a dapp to upload files on IPFS Infura. I am using IpfsHttpClient in web browser by including the script

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

But when I get the instance using:

var ipfs = window.IpfsHttpClient('ipfs.infura.io', '5001', { protocol: 'http' });

I get the error and 400(Bad Request)

Access to fetch at 'http://ipfs.infura.io:5001/api/v0/add?stream-channels=true' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

And when I am using :

var ipfs = window.IpfsHttpClient('ipfs.infura.io', '5001', { protocol: 'https' });

I get the error:

Uncaught ReferenceError: https is not defined

What should I do?

I'm facing a very similar issue with Infura IPFS CORS. Here is a minimal code sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Infura IPFS CORS issue</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://unpkg.com/ipfs-http-client@30.1.3/dist/index.js"></script>
    <script src="https://bundle.run/buffer@5.2.1"></script> <!-- required to convert ArrayBuffer to Buffer -->

  </head>
  <body>

    <h3>readAsArrayBuffer to Buffer to Infura to IPFS</h3>
    <input type="file" id="upload">

    <script>
        const ipfs = window.IpfsHttpClient('ipfs.infura.io', '5001')

        $("#upload").on("change", function() {
            var reader = new FileReader();
            reader.onload = function (e) {

                const magic_array_buffer_converted_to_buffer = buffer.Buffer(reader.result); // honestly as a web developer I do not fully appreciate the difference between buffer and arrayBuffer 
                ipfs.add(magic_array_buffer_converted_to_buffer, (err, ipfsHash) => {
                    console.log(err,ipfsHash);
                })
            }
            reader.readAsArrayBuffer(this.files[0]);
        })
    </script>

  </body>
</html>

score 0 · Answer 1 · answered Apr 03 '19 at 04:36

It seems like the your NO 'Access-Control-Allow-Origin' is addressed in this Question here. See if this solves your Bad Request error by using Cors proxy.

IPFS uses http protocol to get files in your local so your {protocol: 'https'} will throw an error.

Hope this helps!

score 0 · Answer 2 · answered Apr 26 '19 at 20:00

It is sorted now: https://ethereum.stackexchange.com/a/70120/2524

The difference from the snippet in the original question: { protocol: 'https' }

Uncaught ReferenceError: https is not defined

Looks like missing 'https' quotes

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Infura IPFS CORS issue</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://unpkg.com/ipfs-http-client@30.1.3/dist/index.js"></script>
    <script src="https://bundle.run/buffer@5.2.1"></script>
  </head>
  <body>

    <h3>readAsArrayBuffer to Buffer to Infura to IPFS</h3>

    <input type="file" id="upload">

    <div id="link"></div> <!-- markup created after upload -->

    <script>
        const ipfs = window.IpfsHttpClient('ipfs.infura.io', '5001', { protocol: 'https' });

        $("#upload").on("change", function() {
            var reader = new FileReader();
            reader.onload = function (e) {

                const magic_array_buffer_converted_to_buffer = buffer.Buffer(reader.result); // honestly as a web developer I do not fully appreciate the difference between buffer and arrayBuffer 
                ipfs.add(magic_array_buffer_converted_to_buffer, (err, result) => {
                    console.log(err, result);

              let ipfsLink = "<a href='https://gateway.ipfs.io/ipfs/" + result[0].hash + "'>gateway.ipfs.io/ipfs/" + result[0].hash + "</a>";
              document.getElementById("link").innerHTML = ipfsLink;

                })
            }
            reader.readAsArrayBuffer(this.files[0]);
        })
    </script>

  </body>
</html>

Uploading files on IPFS Infura

2 Answers2