Get number of remaining files in Plupload queue

Question

Right now I have something like this in plupload.js:

    $("#uploader").pluploadQueue({
    // General settings
    runtimes: 'html5,silverlight,flash',
    url: baseurl + 'admin/pages_images/uploadtoserver/' + pageID,
    browse_button : 'uploadFiles',
    max_file_size: '300mb',
    chunk_size: '1mb',
    unique_names: true,

    // Resize images on clientside if we can
    // resize: {width: 320, height: 240, quality: 100},

    // Specify what files to browse for
    filters: [
        {title: "Image files", extensions: "jpg,gif,png"},
        {title: "Zip files", extensions: "zip"}
    ],

    // Flash/Silverlight paths
    flash_swf_url: baseurl + 'assets/js/plupload/plupload.flash.swf',
    silverlight_xap_url: baseurl + 'assets/js/plupload/plupload.silverlight.xap',

    // PreInit events, bound before any internal events
    preinit: {
        Init: function(up, info) {
            log('[Init]', 'Info:', info, 'Features:', up.features);
        },

        UploadFile: function(up, file) {
            log('[UploadFile]', file);

            // You can override settings before the file is uploaded
            // up.settings.url = 'upload.php?id=' + file.id;
            // up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
        }
    },

    // Post init events, bound after the internal events
    init: {
        Refresh: function(up) {
            // Called when upload shim is moved
            log('[Refresh]');
        },

        StateChanged: function(up) {
            // Called when the state of the queue is changed
            log('[StateChanged]', up.state == plupload.STARTED ? "STARTED": "STOPPED");
        },

        QueueChanged: function(up) {
            // Called when the files in queue are changed by adding/removing files
            log('[QueueChanged]');

        },

        UploadProgress: function(up, file) {
            // Called while a file is being uploaded
            log('[UploadProgress]', 'File:', file, "Total:", up.total);
        },

        FilesAdded: function(up, files) {
            // Callced when files are added to queue
            log('[FilesAdded]');

            plupload.each(files, function(file) {
                log('  File:', file);
            });
        },

        FilesRemoved: function(up, files) {
            // Called when files where removed from queue
            log('[FilesRemoved]');

            plupload.each(files, function(file) {
                log('  File:', file);
            });
        },

        FileUploaded: function(up, file, info) {
            // Called when a file has finished uploading
            log('[FileUploaded] File:', file, "Info:", info);

            var myuploader = $("#uploader").pluploadQueue();

            myuploader.bind('QueueChanged', function(up, files){
                remaining_files = myuploader.files.length;
                alert('All Files uploaded!');
            });

            $.ajax({
                type : "POST",
                url : baseurl + 'admin/pages/reload/' + pageID,
                success: function(data){
                    if(data) {
                        alert('File uploaded!');
                    } else {
                        alert('ajax error');
                    }
                }
            });

        },

        ChunkUploaded: function(up, file, info) {
            // Called when a file chunk has finished uploading
            log('[ChunkUploaded] File:', file, "Info:", info);
        },

        Error: function(up, args) {
            // Called when a error has occured

            // Handle file specific error and general error
            if (args.file) {
                log('[error]', args, "File:", args.file);
            } else {
                log('[error]', args);
            }
        }
    }
});

$('#log').val('');
$('#clear').click(function(e) {
    e.preventDefault();
    $("#uploader").pluploadQueue().splice();
});

But of course it's not working, because I don't know how to decrement the remaining files. Or to be precise I don't know how to get the number of all files in the queue in the first place, so I can -1 them and compare with the initial value. How do I do that?

Answer 1

You have to bind an event for that and create a counter.

A full answer is here.

var files_remaining = 0;
    $("#uploader").pluploadQueue({
    // General settings
    runtimes: 'html5,silverlight,flash',
    url: baseurl + 'admin/pages_images/uploadtoserver/' + pageID,
    browse_button : 'uploadFiles',
    max_file_size: '300mb',
    chunk_size: '1mb',
    unique_names: true,

    // Resize images on clientside if we can
    // resize: {width: 320, height: 240, quality: 100},

    // Specify what files to browse for
    filters: [
        {title: "Image files", extensions: "jpg,gif,png"},
        {title: "Zip files", extensions: "zip"}
    ],

    // Flash/Silverlight paths
    flash_swf_url: baseurl + 'assets/js/plupload/plupload.flash.swf',
    silverlight_xap_url: baseurl + 'assets/js/plupload/plupload.silverlight.xap',

    // PreInit events, bound before any internal events
    preinit: {
        Init: function(up, info) {
            log('[Init]', 'Info:', info, 'Features:', up.features);
        },

        UploadFile: function(up, file) {
            log('[UploadFile]', file);

            // You can override settings before the file is uploaded
            // up.settings.url = 'upload.php?id=' + file.id;
            // up.settings.multipart_params = {param1: 'value1', param2: 'value2'};
        }
    },

    // Post init events, bound after the internal events
    init: {
        Refresh: function(up) {
            // Called when upload shim is moved
            log('[Refresh]');
        },

        StateChanged: function(up) {
            // Called when the state of the queue is changed
            log('[StateChanged]', up.state == plupload.STARTED ? "STARTED": "STOPPED");
        },

        QueueChanged: function(up) {
            // Called when the files in queue are changed by adding/removing files
            log('[QueueChanged]');

        },

        UploadProgress: function(up, file) {
            // Called while a file is being uploaded
            log('[UploadProgress]', 'File:', file, "Total:", up.total);
        },

        FilesAdded: function(up, files) {
            // Callced when files are added to queue
            log('[FilesAdded]');

            plupload.each(files, function(file) {
                log('  File:', file);
            });
        },

        FilesRemoved: function(up, files) {
            // Called when files where removed from queue
            log('[FilesRemoved]');

            plupload.each(files, function(file) {
                log('  File:', file);
            });
        },

        FileUploaded: function(up, file, info) {
            // Called when a file has finished uploading
            log('[FileUploaded] File:', file, "Info:", info);

            var myuploader = $("#uploader").pluploadQueue();

            myuploader.bind('QueueChanged', function(up, files){
                remaining_files = myuploader.files.length;
                alert('All Files uploaded!');
            });

            $.ajax({
                type : "POST",
                url : baseurl + 'admin/pages/reload/' + pageID,
                success: function(data){
                    if(data) {
                        alert('File uploaded!');
                    } else {
                        alert('ajax error');
                    }
                }
            });

        },

        ChunkUploaded: function(up, file, info) {
            // Called when a file chunk has finished uploading
            log('[ChunkUploaded] File:', file, "Info:", info);
        },

        Error: function(up, args) {
            // Called when a error has occured

            // Handle file specific error and general error
            if (args.file) {
                log('[error]', args, "File:", args.file);
            } else {
                log('[error]', args);
            }
        }
    }
});
var uploader = $("#uploader").pluploadQueue();

uploader.bind('QueueChanged', function(up, files)
{
    files_remaining = uploader.files.length;
});

uploader.bind('FileUploaded', function(up, file, res)
{
    files_remaining--;
    if (files_remaining == 0)
    {
        alert('Complete!');
    }
});

Answer 2

In the FileUploaded event check up.total.queued:

uploader.bind('FileUploaded', function(up, file, res)
    {
        if (up.total.queued == 0)
        {
            alert('Complete!');
        }
    });

Answer 3

Using UI.Plupload you can do ...

$('#uploader').plupload('getUploader').total.queued