是否可以将 dropzone 与 pinata.cloud（IPFS 固定服务）一起使用

Question

是否可以使用 dropzone with pinata.cloud（IPFS 固定服务）

我得到：

{"error":"请求格式无效"}

请求URL：https://api.pinata.cloud/pinning/pinFileToIPFS
请求方式：POST
状态代码：400 错误请求
远程地址：167.172.134.223:443
推荐政策：strict-origin-when-cross-origin

请求headers
Access-Control-Allow-Credentials: 真
Access-Control-Allow-Origin: http://localhost
连接：keep-alive
Content-Length: 34
Content-Type: application/json;字符集=utf-8
日期：2021 年 4 月 3 日星期六 19:58:37 GMT
ETag: W/"22-q8Y/q2udlSMod3Kdc/J8rx39COA"
服务器：nginx/1.16.1
变化：起源
X-Powered-By：快递
X-RateLimit-Limit: 180
X-RateLimit-Remaining: 157
X-RateLimit-Reset: 1617479953

请求headers
接受：application/json
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Cache-Control: no-cache
连接：keep-alive
Content-Length: 63994
Content-Type: multipart/form-data;边界= ${data._boundary}
DNT: 1
主持人：api.pinata.cloud
来源：http://localhost
pinata_api_key:
pinata_secret_api_key:
编译指示：no-cache
推荐人：http://localhost/
Sec-Fetch-Dest: 空
Sec-Fetch-Mode: 科尔斯
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>

Answer 1

看来我把事情复杂化了。

对于将来需要这样做的任何人，这里是更新的测试代码。只需添加您的 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>

Answer 2

@scottsuhy

这里是 Pinata 的 Matt。

我很高兴你能让事情顺利进行！

但是，我确实想指出，如果有人要检查您网站的源代码，那么在前端应用程序上公开您的 API 密钥可能会使您的帐户遭到滥用。

出于这个原因，如果您要向公众公开您的网站，我们强烈建议使用服务器作为将项目固定到 pinata 的代理 public。

是否可以将 dropzone 与 pinata.cloud（IPFS 固定服务）一起使用

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

javascript

dropzone.js