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>

Solution

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>