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

}); 

当我尝试它在浏览器中的悬浮窗的作品，但忽略与选项的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' 
    }); 
});