FineUploader client event after all uploads are done

Question

I implemented FineUploader and I would like to hook up my client script to an event after all files are uploaded. Is that possible?

My implementation follows. Just want to know if that's right direction.

    function init() {
    var uploader = new qq.FineUploader({
        element: document.getElementById('button-selectfiles'),
        request: {
            endpoint: '/Up/UploadFile'
        },

        callbacks: {
            onStatusChange: onFileUploadStatusChange
        }
    });
};

var uploads = 0;
function onFileUploadStatusChange(id, oldStatus, newStatus) {
    console.log(newStatus);

    if (newStatus === 'submitting') {
        uploads++;
    }

    if (newStatus === 'upload successful' || newStatus === 'upload failed') {
        uploads--;
    }

    if (uploads === 0) {

        console.log('done');
    }
}

score 10 · Accepted Answer · edited Jun 15 '15 at 14:40

10

onComplete - used for single upload file, if you are using a multiple files upload just use onAllComplete:

callbacks: {
    onAllComplete: function() {
        alert('done')
    }
}

edited Jun 15 '15 at 14:40

Ray Nicholus

19,538
14
59
82

answered Jun 14 '15 at 15:32

denala

116
1
3

score 5 · Answer 2 · edited May 23 '17 at 12:00

Your onFileUploadStatusChange function fails to check for cancelled files.

The way to verify if all files have been uploaded is via the API methods: getInProgress and getUploads. If we have 0 uploads in progress, and 0 failed uploads, then we can safely assume that all files have been uploaded. You may want to remove the check for failed uploads if you would still like to proceed if any upload has failed. We check for these conditions to be met during the onStatusChange and onComplete callbacks. The onStatusChange event should only check if the file has been cancelled because that might mean that all of the other files have completed, and thus the custom action can be completed.

Note: I've adapted my answer of 16989719 to work for non-jQuery Fine Uploader.

function init() {
    var uploader;

    function check_done() {
    // Alert the user when all uploads are completed.
    // You probably want to execute a different action though.
        if (allUploadsCompleted() === true) {
            window.alert('All files uploaded');
        } 
    }

    function allUploadsCompleted() {
        // If and only if all of Fine Uploader's uploads are in a state of 
        // completion will this function fire the provided callback.

        // If there are 0 uploads in progress...
        if (uploader.getInProgress() === 0) {
            var failedUploads = uploader.getUploads({ status: qq.status.UPLOAD_FAILED });
            // ... and none have failed
            if (failedUploads.length === 0) {
                // They all have completed.
                return true;
            }
        }        
        return false;
    }

    uploader = new qq.FineUploader({
        element: document.getElementById('button-selectfiles'),
        request: {
            endpoint: '/Up/UploadFile'
        },
        callbacks: {
            onStatusChange: function (id, oldStatus, newStatus) {
                // This will check to see if a file that has been cancelled
                // would equate to all uploads being 'completed'.
                if (newStatus === qq.status.CANCELLED) {
                    check_done();
                }     
            },
            onComplete: check_done
        }
    });
};

Its quite verbal, I would expect this out of the box, but thanks very much. This is better and more robust for sure : ) — vmachacek, Oct 09 '13 at 15:09
The API has evolved since, and @denala's answer is the proper solution now. — Ray Nicholus, Jun 14 '15 at 17:07

FineUploader client event after all uploads are done

2 Answers2