Używanie Dropzone.js do przesyłania po utworzeniu nowego użytkownika, wysyłanie nagłówków

Question

Używam świetnej wtyczki - dropzone.js (dropzonejs.com), aby moja strona była trochę bardziej wymyślna podczas rejestracji nowego użytkownika.

Zasadniczo użytkownik wypełnia formularz, upuszcza kilka obrazów do "strefy upuszczania" i klika "Wyślij", który uruchamia wywołanie ajax, które wysyła formularz do skryptu php.

Mam parametry dropzone ustawione na enqueForUpload: false, co zapobiega automatycznemu przesyłaniu plików, ponieważ muszę je przesłać do uploadów/$ userid po utworzeniu nowego identyfikatora użytkownika. Mogę podać parametry nagłówków dropzone, które zakładam, że będą publikowane w url, podobnie jak w wywołaniu ajax, zamiast danych: {'userid': userid}, dropzone używa nagłówków: {'userid': userid} ... jednak , dropzone zostaje zainicjalizowane na document.ready, a ponieważ zmienna userid nie jest jeszcze zadeklarowana, dropzone nie może się zainicjować.

Zgaduję, że będę potrzebować zainicjować zrzut strefy z document.ready, ale nie daję jeszcze nagłówków. Następnie po pomyślnym przetworzeniu formularza ajax i zwróceniu userid, wywołaj dropzone do przesłania i nadaj mu nagłówki w tym miejscu. Problem polega na tym, że nie wiem, jaki kod musiałby zostać wywołany, aby to się stało.

Initialize Dropzone na gotowe:

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

Potem ...

$('#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

Jeśli korzystasz z najnowszej wersji DropZone parametr enqueueForUpload została usunięta, na korzyść autoProcessQueue co sprawia, że ​​całość kolejkowanie jest łatwiejsze.

Po prostu zadzwoń pod numer myDropzone.processQueue(), gdy tylko chcesz, aby wszystkie pliki zostały przesłane.

Aby dodać dodatkowe parametry do XHR można po prostu zarejestrować się na wydarzenie sending, która pobiera obiekt xhr jako drugi i trzeci parametr formData jak i dodać dane samodzielnie. Coś takiego:

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

Answer 2

użyłem Enyo odpowiedź, ale użyłem wielu dropzones z atrybutem id danych w mojej stronie więc użyłem:

$('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); 
});