Valums Ajax Uploader (Mutli) - Detecta cuando se cargan todos los archivos

Question

Estoy usando Valums Ajax Uploader para cargar un lote de archivos. Recientemente cambiamos el código de un tipo de subida simple de carga múltiple. Esto ha planteado un problema con nuestro código.

Como puede ver, cuando se dispara el evento onComplete, volvemos a cargar la página para mostrar las imágenes recién cargadas. Sin embargo, el evento onComplete parece estar activando después de que CADA archivo se completa, y no después de que todo el lote lo haga. Esto ahora causa un problema porque cuando el primer archivo finaliza, se inicia el intento de recarga de la página y el cargador muestra una alerta "Si abandonas esta página, todo se romperá en tus cargas restantes", o algo por el estilo.

Noté que el evento onComplete devuelve un ID basado en 0 del archivo completo, pero no estoy seguro exactamente cómo usarlo para determinar cuándo se realiza el lote.

Supongo que mi pregunta es A) ¿Hay un evento diferente que se desencadena cuando se completan todos los archivos o B) Cómo determino cuántos archivos ha seleccionado el usuario, para hacer un seguimiento en el evento onComplete cuántos archivos ¿Han completado?

var uploader = new qq.FileUploader({ 
     multiple: true, 
     element: document.getElementById('file-uploader'), 
     action: '/projectPhotoUpload.php', 
     allowedExtensions: ['jpg', 'png', 'gif'], 
     debug: true, 
     params: {id: i}, 
     onComplete: function(id, fileName, responseJSON){ 
      window.location = 'projects.php?all=true&tab=1&sel=' + currProject;         
     } 
    }) 

Answer 1

Puede agregar un contador que se incrementa cuando se inicia una carga y disminuye cuando se completa. Sólo en redirigir completa cuando el contador es 0.

var running = 0; 
var uploader = new qq.FileUploader({ 
    multiple: true, 
    element: document.getElementById('file-uploader'), 
    action: '/projectPhotoUpload.php', 
    allowedExtensions: ['jpg', 'png', 'gif'], 
    debug: true, 
    params: {id: i}, 
    onSubmit: function(id, fileName){ 
     running++;         
    }, 
    onComplete: function(id, fileName, responseJSON){ 
     running--; 
     if(running==0){ 
      window.location = 'projects.php?all=true&tab=1&sel=' + currProject;         
     } 
    } 
}) 

Answer 2

Buena respuesta, por interés si se quería comprobar el responseJSON para ver si los archivos habían subido, su conjunto en el script del servidor

return array('success'=>true, 'filename'=>$filename . '.' . $ext); 

a continuación, puede recogerlo en el JS como

var success = responseJSON["success"] 
var filename = responseJSON["filename"] 

de esta manera se podría hacer una lista de archivos y comprobar los nombres sobre el resultado o solamente disminuir

if (success == true) 

Si la carga había fallado, entonces puede que no desee que para decremento por ejemplo

Answer 3

Usted tendrá que añadir un evento de cancelar en caso de que el usuario cancela una carga de archivos:

onCancel: function(id, fileName){running--;} 

Estoy debatiendo el enfoque correcto para continuar aquí en mi implementación. También me gustaría que la página se redirija una vez que se cargan los archivos, pero ¿qué ocurre si el usuario tiene la intención de cargar más archivos? los archivos pueden distribuirse en directorios separados.

Parece que el mejor enfoque es tener un botón "Estoy listo" que se redirigirá una vez que el usuario termine de cargar.

Answer 4

Una manera más simple sería usar la propiedad interna _filesInProgress para verificar si se han tratado todos los archivos cargados. Daría:

var uploader = new qq.FileUploader({ 
    multiple: true, 
    element: document.getElementById('file-uploader'), 
    action: '/projectPhotoUpload.php', 
    allowedExtensions: ['jpg', 'png', 'gif'], 
    debug: true, 
    params: {id: i}, 
    onComplete: function(id, fileName, responseJSON){ 
     if(uploader._filesInProgress == 0){ 
      window.location = 'projects.php?all=true&tab=1&sel=' + currProject; 
     }         
    } 
});