Nginx Question posted in
The official documentation can be found here.

is it possible to use dropzone with pinata.cloud (IPFS pinning service) – Nginx

is it possible to use dropzone with pinata.cloud (IPFS pinning service)

I get:

{"error":"Invalid request format"}

Request URL: https://api.pinata.cloud/pinning/pinFileToIPFS
Request Method: POST
Status Code: 400 Bad Request
Remote Address: 167.172.134.223:443
Referrer Policy: strict-origin-when-cross-origin

request headers
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: http://localhost
Connection: keep-alive
Content-Length: 34
Content-Type: application/json; charset=utf-8
Date: Sat, 03 Apr 2021 19:58:37 GMT
ETag: W/"22-q8Y/q2udlSMod3Kdc/J8rx39COA"
Server: nginx/1.16.1
Vary: Origin
X-Powered-By: Express
X-RateLimit-Limit: 180
X-RateLimit-Remaining: 157
X-RateLimit-Reset: 1617479953

request headers
Accept: application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 63994
Content-Type: multipart/form-data; boundary= ${data._boundary}
DNT: 1
Host: api.pinata.cloud
Origin: http://localhost
pinata_api_key:
pinata_secret_api_key:
Pragma: no-cache
Referer: http://localhost/
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.90 Safari/537.36 Edg/89.0.774.57
X-Requested-With: XMLHttpRequest

<!doctype html>
<html>    
  <head>
    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
  </head>

  <body>
    <form action="" method="POST" enctype="multipart/form-data" class="dropzone " role="form">        
        <div class="dropzone" id="dropzone"></div>
        <div class="dropzonePreview dropzone"></div>
    </form>
  </body>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js"></script>

  <script>

        Dropzone.autoDiscover = false;
        const pinataApiKey = "removed";
        const pinataSecretApiKey = "removed";

        $('#dropzone').dropzone({
            previewsContainer: ".dropzonePreview",
            url: "https://api.pinata.cloud/pinning/pinFileToIPFS",
            maxFilesize: 2, 
            maxFiles: 1,
            acceptedFiles: ".jpeg,.jpg,.png",
            uploadMultiple: false,
            parallelUploads: 100,
            headers: {
                "Content-Type": `multipart/form-data;`,
                pinata_api_key: pinataApiKey, 
                pinata_secret_api_key: pinataSecretApiKey,
            },
            sending: function(file, xhr, formData) {
                this.on("sending", function(file, xhr, formData) {                
                console.log(formData)
                });
            }                
        });

</script>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    it seems like I was over complicating things.

    For anyone that needs to do this in the future here is the updated test code. just add your pinata api keys

    <!doctype html>
<html>    
  <head>
    <link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
  </head>

  <body>
    <form action="" method="POST" enctype="multipart/form-data" class="dropzone " role="form">        
        <div class="dropzone" id="dropzone"></div>
        <div class="dropzonePreview dropzone"></div>
    </form>
    <div id="response_from_upload"></div>
  </body>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/min/dropzone.min.js" integrity="sha512-VQQXLthlZQO00P+uEu4mJ4G4OAgqTtKG1hri56kQY1DtdLeIqhKUp9W/lllDDu3uN3SnUNawpW7lBda8+dSi7w==" crossorigin="anonymous"></script>

  <script>

        Dropzone.autoDiscover = false;

        //NOTE: THIS IS TEST CODE.  NEVER PUT API KEYS IN JAVASCRIPT
        const pinataApiKey = "add your own keys here";
        const pinataSecretApiKey = "add your own keys here";

        $('#dropzone').dropzone({
            previewsContainer: ".dropzonePreview",
            url: "https://api.pinata.cloud/pinning/pinFileToIPFS",
            //maxFilesize: 2, 
            //maxFiles: 1,
            acceptedFiles: ".jpeg,.jpg,.png",
            //uploadMultiple: true,
            //parallelUploads: 1,
            headers: {                
                pinata_api_key: pinataApiKey, 
                pinata_secret_api_key: pinataSecretApiKey,
            },
            init: function() {
                this.on("sending", function(file, xhr, formData){                        
                        const metadata = JSON.stringify({
                            name: 'testname',
                            keyvalues: {
                                exampleKey: 'exampleValue'
                            }
                        });
                        formData.append('pinataMetadata', metadata);
                });
            },
            error: function(file, message) {
                $(file.previewElement).addClass("dz-error").find('.dz-error-message').text(message.error);
                console.log("ERROR: ", message.error);
            },
            success:function(file, response) {                                        
                console.log("SUCCESS: ", response);                
                $('#response_from_upload').html("Response: " + response.IpfsHash); 
            }
        });


</script>
</html>

  2. 0

    @scottsuhy

    Matt from Pinata here.

    I’m glad you were able to get things working!

    However, I do want to point out that exposing your API keys on a front-end application can leave your account open to abuse if anybody were to inspect the source code of your website.

    For this reason we strongly recommend using a server as a proxy for pinning items to pinata if you’re going to expose your website to the general public.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search