使用 dropzonejs-rails 和选项

Question

我计划使用 dropzone.js 将文件上传到我的 rails 应用程序。但是我在使用自定义选项时遇到了问题。我正在使用 Dropzone.js 的示例中的代码。

这是我的代码：

<%= form_for(@document, html: {multipart: true, class: 'dropzone', id: 'myAwesomeDropzone'}) do |f| %>
    <div class="fallback">
      <%= f.file_field :document %><br>
      <%= f.submit 'Upload my document' %>
    </div>
<% end %>

js代码：

document.addEventListener("turbolinks:load", function () {
    // disable auto discover
    Dropzone.autoDiscover = false;

    // "myAwesomeDropzone" is the camelized version of the HTML element's ID
    Dropzone.options.myAwesomeDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        dictDefaultMessage : 'Testing'
    };

});

当我在浏览器中尝试时，dropzone 可以工作，但会忽略带有选项的 javascript 代码。我做错了什么？

Answer 1

我认为，问题是您在自动发现发生后配置表单（并停止自动发现）。使用完全相同的form_for 标签，我可以通过移动

Dropzone.autoDiscover = false;

在turbolinks:load 事件之外，然后在配置块之后初始化新的放置区。我的 javascript 最终看起来像：

Dropzone.autoDiscover = false;
document.addEventListener("turbolinks:load", function () {
    // "myAwesomeDropzone" is the camelized version of the HTML element's ID
    Dropzone.options.myAwesomeDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 2, // MB
        dictDefaultMessage : 'Testing'
    };

    new Dropzone("#myAwesomeDropzone");
});

这可以进一步简化为

Dropzone.autoDiscover = false;
document.addEventListener("turbolinks:load", function () {
  new Dropzone("#myAwesomeDropzone", {
    paramName: "file",
    maxFilesize: 2,
    dictDefaultMessage: 'Testing'
  });
});