Valums Ajax Uploader (Mutli) - Detect when all fil

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;                                 
        }
    }   
}) 

Answer 2

Good answer, out of interest if you wanted to check the responseJSON to see if the files had uploaded, its set on the server script

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

Then you can pick it up in the JS like

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

This way you could make a list of files and check the names on completion, or only decrement

if (success == true)

If the upload had failed, then you might not want it to decrement for example

Answer 3

You'll need to add a cancel event in case the user cancels out of a file upload:

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

I'm debating the right approach to take here on my implementation. I also would like to have the page redirect once the files are uploaded but what if the user intends to upload more files; the files may be spread out in separate directories.

Seems like the best approach is to have an "I'm Done" button that will redirect once the user is finished uploading.

Answer 4

A simpler way would be to use the inner property _filesInProgress to check if all uploaded files have been treated. It would give:

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;
        }                                 
    }   
});