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

使用 dropzonejs-rails 和选项

Using dropzonejs-rails and options

javascript

ruby-on-rails

dropzone.js