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

【问题标题】：is it possible to use dropzone with pinata.cloud (IPFS pinning service)是否可以将 dropzone 与 pinata.cloud 一起使用（IPFS 固定服务）
【发布时间】：2021-04-02 21:12:07
【问题描述】：

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

我明白了：

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

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

请求标头
访问控制允许凭据：true
访问控制允许来源：http://localhost
连接：保持活动
内容长度：34
内容类型：应用程序/json；字符集=utf-8
日期：格林威治标准时间 2021 年 4 月 3 日星期六 19:58:37
ETag：W/“22-q8Y/q2udlSMod3Kdc/J8rx39COA”
服务器：nginx/1.16.1
变化：起源
X-Powered-By: Express
X-RateLimit-限制：180
X-RateLimit-剩余：157
X-RateLimit-Reset：1617479953

请求标头
接受：应用程序/json
接受编码：gzip、deflate、br
接受语言：en-US,en;q=0.9
缓存控制：无缓存
连接：保持活动
内容长度：63994
内容类型：multipart/form-data；边界= ${data._boundary}
DNT：1
主机：api.pinata.cloud
来源：http://localhost
pinata_api_key:
pinata_secret_api_key:
编译指示：无缓存
参考：http://localhost/
Sec-Fetch-Dest：空
秒取模式：cors
Sec-Fetch-Site：跨站点
用户代理：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>

【问题讨论】：

标签： javascript dropzone.js

【解决方案1】：

@scottsuhy

这里是皮纳塔的马特。

很高兴您能够让事情顺利进行！

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

因此，如果您要将您的网站公开给公众，我们强烈建议您使用服务器作为将项目固定到 pinata 的代理。

【讨论】：

【解决方案2】：

好像我把事情复杂化了。

对于将来需要这样做的任何人，这里是更新的测试代码。只需添加您的 pinata api 密钥

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

【讨论】：