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'
  });
});

使用dropzonejs-rails和选项

1 个答案: