blueimp jquery-file-upload | Multiple instances and one global Upload-Button

Question

I'm using the bluimp jQuery-File-Upload-plugin to upload files in multiple instances.

I use one button which starts the upload process for every instance.
Furthermore i have a global process statistic which summarized the stats from each instance.

statsData = new Array(); // for global progress-bar/-stats
$('.fileupload').each(function () {
    statsData.push($(this).fileupload({
        dropZone: $(this).closest('.dropzone'),
        url: 'foo/bar'
    }).on('fileuploadadd', function (e, data) {
        $("#btn-submit-all").on('click', function () {
            $('.fileupload-progress.global.fade').show();
            data.submit();
    }).on('fileuploadstart', function (e) {
        $('.fileupload-progress.panel.fade', $(this)).show();
    }).on('fileuploadprogress', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress-bar', data.context).attr('value', progress);
    }).on('fileuploadprogressall', function (e, data) {
        var progressall = parseInt(data.loaded / data.total * 100, 10);
        $('.fileupload-progress.panel .progress-bar', $(this)).attr('value', progressall);
        renderGlobalProgress(statsData);
    }).fileupload('progress'));
});

So far, so good.
The upload and the global progress-bar/-stats works fine.

The problem is now, when a file is canceled from the filelist, the file will be deleted from the list (upload template) but it is still in the "upload queue" ( filelist ?) and will upload.

I isolate the problem (probably?) to this part:

// ...
.on('fileuploadadd', function (e, data) {
    $("#btn-submit-all").on('click', function () {
        $('.fileupload-progress.global.fade').show();
        data.submit();
})
// ...

Because when i use the standard Start Upload -Button for each instance, everything works fine.
But how can i use the global button to start the uploads instead of my resolution?

Answer 1

Not the best solution, but i found a workaround which solves my problem.

// ...
$('#btn-submit-all').on('click', function(){
    $('form.fileupload button.start').click();
});
// ...

I bind the click event on the global Start Upload -Button and triggers then the click ("start") event on each panel self.
Keep in mind that you hide the Start Upload -Buttons from the panels and the file-table with jQuery or CSS-Styles.

Here the whole code:

statsData = new Array(); // for global progress-bar/-stats
$('.fileupload').each(function () {
    statsData.push($(this).fileupload({
        dropZone: $(this).closest('.dropzone'),
        url: 'foo/bar'
    }).on('fileuploadstart', function (e) {
        $('.fileupload-progress.global.fade').show()
        $('.fileupload-progress.panel.fade', $(this)).show()
    }).on('fileuploadprogress', function (e, data) {
        var progress = parseInt(data.loaded / data.total * 100, 10);
        $('.progress-bar', data.context).attr('value', progress);
    }).on('fileuploadprogressall', function (e, data) {
        var progressall = parseInt(data.loaded / data.total * 100, 10);
        $('.fileupload-progress.panel .progress-bar', $(this)).attr('value', progressall);
        renderGlobalProgress(statsData);
    }).fileupload('progress'));
});


$('#btn-submit-all').on('click', function() {
    $('form.fileupload button.start').click();
});