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

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

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

У меня есть параметры dropzone, установленные в enqueForUpload: false, что сохраняет файлы от автоматической загрузки, так как мне нужно, чтобы они загружались в uploads/$userid после создания нового идентификатора пользователя. Я могу предоставить параметры заголовка dropzone, который я беру на URL-адрес, похожий на вызов ajax, вместо данных: {'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' */

     });
});

Ответы

Ответ 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);
});

Ответ 2

Я использовал enyo-ответ, но я использовал множество dropzones с атрибутом 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);
});