Question

I have downloaded SWFUpload, in hoping to create the functionality to upload large files over my website.

I found this guide: http://webdeveloperplus.com/jquery/multiple-file-upload-with-progress-bar-using-jquery/ that I thought I could start from. The difference is that I only want to allow only one image to be uploaded at a time. But I don’t know how to restore SWFUpload after I uploaded a file? I want the queue to be reset and the progressbar to dissapear.

Debug says: SWF DEBUG: Event: uploadError : Upload limit reached. No more files can be uploaded.

Here is my code for SWFUpload:

$(function()
{
    $('#swfupload-control').swfupload({
          upload_url                : "upload-file.php"
        , file_post_name            : 'uploadfile'
        , file_size_limit           : "102400" // 100 MB
        , file_types                : "*.jpg;*.png;*.gif"
        , file_types_description    : "Image files"
        , file_upload_limit         : 1
        , flash_url                 : "js/swfupload/swfupload.swf"
        , button_image_url          : 'js/swfupload/wdp_buttons_upload_114x29.png'
        , button_width              : 114
        , button_height             : 29
        , button_placeholder        : $('#button')[0]
        , debug                     : true
    })
    .bind('fileQueued', function(event, file)
    {
        var listitem='<li id="'+file.id+'">'+
            '<span class="progresstext"><span class="progressvalue"></span> '+file.name+'</span>'+
            '<div class="progressbar"><div class="progress"></div></div>'+
            '</li>';
        $('#log').append(listitem);
        // start the upload since it's queued
        $(this).swfupload('startUpload');
    })
    .bind('fileQueueError', function(event, file, errorCode, message)
    {
        alert('Size of the file '+file.name+' is greater than limit');
    })
    .bind('uploadStart', function(event, file)
    {
        $('#log li#'+file.id).find('span.progressvalue').text('0%');
    })
    .bind('uploadProgress', function(event, file, bytesLoaded)
    {
        //Show Progress
        var percentage = Math.round((bytesLoaded/file.size)*100);
        $('#log li#'+file.id).find('div.progress').css('width', percentage+'%');
        $('#log li#'+file.id).find('span.progressvalue').text(percentage+'%');
    })
    .bind('uploadSuccess', function(event, file, serverData)
    {
        var item = $('#log li#'+file.id);
        item.find('div.progress').css('width', '100%');
        item.find('span.progressvalue').text('100%');
    })
    .bind('uploadComplete', function(event, file)
    {
        // upload has completed, try the next one in the queue
        $(this).swfupload('startUpload');
    })

});

Answer 1

If you are dealing with upload queues, it is much simpler to use the swfupload.queue plugin

Then you can bind the ‘queueComplete’ event on your swfupload object, which will be fired once the whole queue has been processed (this is where you would want to hide your progressbar and reset the queue). To reset the queue, this plugin also adds a cancelQueue() function (pay attention as to where you call it though, as it will cancel any on-going upload).

If you want to cancel it by hand/not use this plugin, you have to cancel the files one by one until the stats() object says it’s empty

// request your stat objects, it contains amongst others the number of files in the queue
var stats = my_upload.getStats();
// while the queue is not empty ...
while (stats.files_queued > 0) {
  // .. cancel the first in the queue (null: take the first found, false: don't trigger an error event)
  my_upload.cancelUpload(null, false);
  // it is important to reload the stats everytime and not just do a for (i = 0; i < stats.files_queued ...
  stats = my_upload.getStats();
}