dropzone in a form - InvalidAuthenticityToken

Question

Я использую зону выпадения как часть формы. то есть. форма имеет другие элементы, кроме только поля 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

UPDATE: решены токены проблемы недействительна подлинностью. Однако теперь я получаю ошибку ActionView::MissingTemplate - Missing template. Перед тем, как к зоне добавилась капельница. Я успешно смог отправить форму и выполнить некоторый 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 

Логи:

работы POST "/ submit_form" для 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 | Параметры: {"firstname" => "something", "lastname" => "something", "file" => {"0" => #, @ original_filename = "filename.png", @ content_type = "image/png ", @ headers =" Content-Disposition: form-data; name = \ "file [0] \"; filename = \ "filename.png \" \ r \ nContent-Type: image/png \ r \ n "> }, "language" => "en"}

14:28:00 web.1 | проверка

14:28:00 web.1 | Завершено 406 Не допускается в 2 мс 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

Есть решение:

В контроллере реагируют только с JSON.

Весь код js, который вы хотите выполнить, поместите его в Dropzone.Варианты:

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

Answer 3

Я хотел, чтобы все мое DropZones работать с моей установкой (Rails 5, CSRF токен и так далее). Так что я придумал Oneliner поставить после $ -> в CoffeeScript:

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