How do I wait for multiple jquery file uploads?

Question

I'm trying to refresh the page after multiple files have been uploaded using jquery file upload :

For some reason my test message is being called after each individual file upload completion and I'm trying to call this just once after all the files have uploaded. Is this possible?

HTML:

<form id="fileupload" action="server/php/" method="POST" enctype="multipart/form-data">
    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="row fileupload-buttonbar">
        <div class="span7">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="icon-plus icon-white"></i>
                <span>Add files...</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Start upload</span>
            </button>
        </div>
    </div>
    <!-- The loading indicator is shown during file processing -->
    <div class="fileupload-loading"></div>
    <br>
    <!-- The table listing the files available for upload/download -->
    <table role="presentation" class="table table-striped"><tbody class="files" data-toggle="modal-gallery" data-target="#modal-gallery"></tbody></table>
</form>

JQuery

$('#fileupload').bind('fileuploadcompleted', function (e, data) {
    e.preventDefault();

    // I would expect to see this after all files ahve uplaoded but I see it for each file upload ?
    alert("Completed");

    //location.reload();
    ...
})

Answer 1

Listen for the fileuploadadd event, and each time it occurrs increment some variable so you know how many files there are to upload. Then, in your fileuploaddone event handler, increment another variable so you know how many have finished. When the two are equal, all uploads are done, so do your reload (or whatever else you may need to do). It seems there should be a better solution, but this one should work.

Answer 2

stop event is only triggered after all uploads are finished.

$('#fileupload').bind('fileuploadstop', function (e, data) {
    location.reload();
})