Question

I am using the Valums Ajax Uploader to upload a batch of files. We recently changed the code from a single-upload a multi-upload type. This has raised a problem with our code.

As you can see, when the onComplete event fire, we reload the page to show newly uploaded images. However, the onComplete event seems to be firing after EACH file completes, and not after the entire batch does. This now causes a problem because when the first file finishes, the page reload attempt is fired and the uploader pops up an alert “If you leave this page, all heck will break loose on your remaining uploads” – or something to that effect.

I notice the onComplete event sends back a 0-based ID of the completed file, but I am not sure exactly how to use this to determine when the batch is done.

I guess my question is A) Is there a different event that triggers when all files are complete or B) How do I determine how many files the user has selected, in order to keep track in the onComplete event how many files have completed?

    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

You could add a counter that increments when an upload is started and decrements when complete. Only redirect on complete when the counter is 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;                                 
        }
    }   
})