Usare Dropzone.js per caricare dopo la creazione di un nuovo utente, inviare intestazioni

Question

Sto usando un ottimo plugin - dropzone.js (dropzonejs.com) per rendere il mio sito un po 'più elegante quando si registra un nuovo utente.

In pratica, l'utente compila un modulo, rilascia un paio di immagini nella "dropzone" e fa clic su "Invia", che attiva una chiamata ajax che invia il modulo a uno script php.

I parametri dropzone sono impostati su enqueForUpload: false, che mantiene i file dal caricamento automatico, poiché ho bisogno che vengano caricati in upload/$ id utente, dopo che è stato creato il nuovo ID utente. Posso dare i parametri di intestazione dropzone, che sto assumendo post all'url, simile a una chiamata ajax, invece di data: {'userid': userid}, dropzone usa le intestazioni: {'userid': userid} ... Tuttavia , dropzone viene inizializzato su document.ready e poiché la variabile userid non è ancora stata dichiarata, dropzone non riesce a inizializzarsi.

Suppongo che sarà necessario inizializzare dropzone con document.ready, ma non ancora fornire le intestazioni. Quindi, dopo che l'elaborazione del modulo ajax ha avuto esito positivo e restituisce userid, chiamare dropzone per caricarlo e assegnargli le intestazioni a quel punto. Il problema è che non so quale codice avrebbe bisogno di essere chiamato per farlo accadere.

inizializzazione Dropzone sul pronto:

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

Poi ...

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

Se si utilizza la versione più recente Dropzone, il parametro enqueueForUpload è stato rimosso, a favore di autoProcessQueue che rende l'intero fare la fila più facile.

Quindi, è sufficiente chiamare il numero myDropzone.processQueue() non appena si desidera caricare tutti i file.

Per aggiungere ulteriori parametri per la XHR si può semplicemente registrarsi per l'evento sending, che ottiene l'oggetto xhr come secondo e formData come terzo parametro, e aggiungere i dati da soli. Qualcosa di simile a questo:

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

Answer 2

ho usato risposta Enyo, ma ho usato molti dropzones con attributo data-id nella mia pagina così ho usato:

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