Question

我使用drop zone作为表单的一部分。即。除了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

日志为：

开始发布＆＃34; / submit_form＆＃34;对于127.0.0.1在2016-10-05 14:28:00 +0800

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

14:28:00 web.1 |参数：{＆＃34;名字＆＃34; =＆gt;＆＃34;东西＆＃34;，＆＃34;姓氏＆＃34; =＆gt;＆＃34;东西＆＃34;，＆＃34;文件＆＃34 ; =＆gt; {＆＃34; 0＆＃34; =＆gt;＃，@ original_filename =＆＃34; filename.png＆＃34;，@ content_type =＆＃34; image / png＆＃34;，@ headers =＆＃34;内容 - 处置：表格数据;命名= \＆＃34;文件[0] \＆＃34 ;; filename = \＆＃34; filename.png \＆＃34; \ r \ nConContent-Type：image / png \ r \ n＆＃34;＆gt;}，＆＃34;语言＆＃34; =＆gt;＆＃34 ;恩＆＃34;}

14:28:00 web.1 |检查

14:28:00 web.1 |已完成406在2ms内无法接受 14:28:00 web.1 | 14:28:00 web.1 | ActionController :: UnknownFormat - ActionController :: UnknownFormat：

Answer 1

尝试将标头添加到您的Dropzone请求

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

Answer 2

我希望我的所有Dropzones都可以使用我的设置（Rails 5，CSRF令牌等）。所以我想出了一个oneliner，将$ ->放在coffeescript中：

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

Answer 3

得到解决方案：

在控制器中只响应json。

您要执行的所有js代码，将其放在Dropzone.options：

中

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

表单中的dropzone - InvalidAuthenticityToken

3 个答案: