Question

I’m using Uploadify on my website and trying to integrate my own, more advanced progress bar. I need to get the status of each file upload regularly so I was planning to use the onProgress event of Uploadify. If I do this:

$('#file-upload').uploadify({
    'uploader'  : '/assets/flash/uploadify.swf',
    'script'    : '/upload.php',
    'cancelImg' : '/assets/images/cancel.png',
    'auto'      : false,
    'multi'     : true,
    'queueID'   : 'file-queue',
    'queueSizeLimit':5,
    'sizeLimit' : 104857600,
    'onSelect'  : function(event, ID, fileObj) {
        files.push({id:ID, size:fileObj.size});
        addFileToQueue(ID, fileObj);
        return false;
    },
    'onError'   : function(event, ID, fileObj, errorObj) {
        alert("Error: Type: " + errorObj.type + " Message: " + errorObj.info);
    },
    'onProgress': function(event, ID, fileObj, data) {
        console.log("progress");
        updateProgress(data);
    }
});

Problem is, I never get progress logged into console, nor does any code in the updateProgress function ever execute. The file uploading does actually work, as I can see the files being uploaded into the uploads directory. I also don’t get any errors in the Javascript console.

What could be wrong here? Thanks.

Answer 1

Try:

'onProgress': function(event, ID, fileObj, data) {
    console.log("progress");
    updateProgress(data);
    return false;
}

From the docs:

“The onProgress option allows you to fire a function each time to progress of a file upload changes. The default function updates the length of the progress bar and percentage displayed. If the custom function returns false, the default function will not run.”