Используя Dropzone.js для загрузки после создания нового пользователя, отправьте заголовки

Question

Я использую отличный плагин - dropzone.js (dropzonejs.com), чтобы сделать мой сайт немного более модным при регистрации нового пользователя.

По сути, пользователь заполняет форму, сбрасывает пару изображений в "dropzone" и нажимает "Submit", что запускает ajax-вызов, который отправляет форму в php-скрипт.

У меня для параметров dropzone установлено значение enqueForUpload: false, которое не позволяет автоматически загружать файлы, поскольку мне нужно, чтобы они загружались в uploads/$userid после создания нового идентификатора пользователя. Я могу дать параметры заголовка dropzone, которые я предполагаю отправлять в URL, аналогично вызову ajax, вместо data: {'userid': userid}, dropzone использует заголовки: {'userid': userid}... Однако dropzone инициализируется в document.ready, и поскольку переменная userid еще не объявлена, dropzone не удается инициализировать.

Я предполагаю, что мне нужно будет инициализировать dropzone с document.ready, но пока не давать ему заголовки. Затем, после успешной обработки формы ajax и возврата идентификатора пользователя, вызовите dropzone для загрузки и передайте ей заголовки в этой точке. Проблема в том, что я не знаю, какой код нужно вызвать, чтобы это произошло.

Инициализируйте Dropzone по готовности:

$(document).ready(function(){
  $('#dropzone').dropzone({
    url: 'dropzoneprocess.php',
    maxFilesize: 1,
    paramName: 'photos',
    addRemoveLinks: true,
    enqueueForUpload: false,
  });
});

Затем...

$('#submit').on('click', function(){
    validation crap here
    $.ajax({
        type: 'post',
        url: 'postform.php',
        data: {'various': form, 'values': here}
        datatype: 'json',
        success: function(data){
           var userid = data.userid;

    /* (and this is what I can't figure out:)
    tell dropzone to upload, and make it 
    post userid to 'dropzone.php' */

     });
});

Answer 1

Если вы используете последнюю версию Dropzone, параметр enqueueForUpload был удален, в пользу autoProcessQueue что делает всю очередь проще.

Так что просто позвоните myDropzone.processQueue() как только вы хотите, чтобы все файлы были загружены.

Чтобы добавить дополнительные параметры в XHR Вы можете просто зарегистрироваться на sending событие, которое получает xhr объект как второй и formData в качестве третьего параметра, и добавьте данные самостоятельно. Что-то вроде этого:

myDropzone.on("sending", function(file, xhr, formData) {
  // add headers with xhr.setRequestHeader() or
  // form data with formData.append(name, value);
});

Answer 2

Я использовал enyo answer, но я использовал много дропзон с атрибутом data-id на своей странице, поэтому я использовал:

$('div.dropzone').dropzone({
    url: 'img.php'
});
var sendingHandler = function(file, xhr, formData) {
    formData.append('id', $(this.element).data('id'));
};
$('div.dropzone').each(function() {
    Dropzone.forElement(this).on('sending', sendingHandler);
});