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