表单中的 dropzone - InvalidAuthenticityToken

Question

我正在使用拖放区作为表单的一部分。 IE。除了 dropzone 字段之外，表单还有其他元素。此外，提交表单后不会加载新视图，只是一些 js 代码，所以 remote = true。表格如下所示：

<%= form_tag submit_form_path, method: "POST", "data-abide" => "", 'autocomplete' => 'off', id: "id-of-form", remote: true, multipart: true do %>

<div class="dropzone" id="myDropzone"></div>
<%= text_field_tag "name",     ....
<%= text_field_tag "number", "",  ....
<%= text_field_tag "email", "",   ....
<%= submit_tag "submit", id: "submit-button" ....

<% end %>

JS

Dropzone.options.myDropzone = {
 url: '/submit_form',
 autoProcessQueue: false,
 uploadMultiple: true,
 parallelUploads: 5,
 maxFiles: 5,
 maxFilesize: 1,
 acceptedFiles: 'image/*',
 addRemoveLinks: true,
 init: function() {
    dzClosure = this; 

    // for Dropzone to process the queue (instead of default form behavior):
    document.getElementById("submit-button").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        dzClosure.processQueue();
    });

    //send all the form data along with the files:
    this.on("sendingmultiple", function(data, xhr, formData) {
        formData.append("name", jQuery("#name").val());
        *the rest of the form elements*
    });
}

}

提交表格后我得到 Can't verify CSRF token authenticity Completed 422 Unprocessable Entity in 2ms ActionController::InvalidAuthenticityToken

更新： 解决了无效的真实性令牌问题。但是，现在我收到 ActionView::MissingTemplate - Missing template 错误。在将 dropzone 添加到表单之前。我成功地提交了表单并执行了一些 js 代码 (submit_details.js.erb) 而无需重新加载页面。

但现在

Processing by XyzController#submit_details as JSON

和

ActionView::MissingTemplate - Missing template xyz/submit_details, application/submit_enquiry with {:locale=>[:en], :formats=>[:json], :variants=>[], :handlers=>[:erb, :builder, :raw, :ruby, :coffee, :arb, :jbuilder]}.

控制器：

我都注释了，功能就

def submit_enquiry 
   #commented stuff
   puts "checking "
   respond_to do |format|          
    format.html    
    format.js
    format.json { render :json => true } 
   end
end

日志是：

于 2016 年 10 月 5 日开始 POST“/submit_form”127.0.0.1 14:28:00+0800

14:28:00 web.1 |由 XyzController#submit_details 处理为 JSON

14:28:00 web.1 |参数：{"firstname"=>"something","lastname"=>"something","file"=>{"0"=>#,@original_filename ="filename.png", @content_type="image/png", @headers="Content-Disposition: form-data; name=\"file[0]\"; 文件名=\"filename.png\"\r\nContent-Type: image/png\r\n">}, "language"=>"en"}

14:28:00 web.1 |检查

14:28:00 web.1 |在 2ms 内完成 406 Not Acceptable 14:28:00 web.1 | 14:28:00 web.1 | ActionController::UnknownFormat - ActionController::UnknownFormat:

Answer 1

尝试将 header 添加到您的 Dropzone 请求

Dropzone.options.myDropzone = {
  url: '/submit_form',
  autoProcessQueue: false,
  ...
  headers: {
    'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
  }
}

Answer 2

得到解决方案：

在控制器中只响应 json。

所有你要执行的js代码，放在里面 Dropzone.options :

this.on("success", function(file, responseText) {
   #js code
});

Answer 3

我希望我所有的 Dropzones 都能与我的设置一起工作（Rails 5、CSRF 令牌等）。所以我想出了一个 oneliner 放在咖啡脚本中的 $ -> 之后：

 Dropzone.prototype.defaultOptions['headers'] = 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')

表单中的 dropzone - InvalidAuthenticityToken

dropzone in a form - InvalidAuthenticityToken

forms

jquery

ruby-on-rails

dropzone.js