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

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

• javascript
• fine-uploader

2 Answers 2

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

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

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 pleted, and thus the custom action can be pleted.

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 pleted.
    // 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 
        // pletion 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 pleted.
                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 'pleted'.
                if (newStatus === qq.status.CANCELLED) {
                    check_done();
                }     
            },
            onComplete: check_done
        }
    });
};