How to cancel an upload?

[bfavaretto]

I'm trying to use the basic plugin (not the UI version) in a project, but can't figure out how to cancel an ongoing upload. I tried several options, including one based on UI's _deleteHandler, but the XHR is never cancelled, according to Firebug. Could you please help? Thank you.

[bfavaretto]

I think I got it now. I wasn't using the add method at all, and I found out there is the place to get the jqXHR object (right?)

[blueimp]

Yes, invoking abort on a jqXHR object cancels the upload.
I've added a section to the API documentation.

[josegrad]

I'm not getting this one working.
I'm using v5 and only jquery.fileupload.js, I'm uploading a single file via file input. All is ok, got my own progress indicator, callbacks etc. However I can't figure how to get the jqXHR from the send method. The example to get the jqXHR in the API documentation looks like it is done when sending files programatically. So I don't know how to apply it and use it as I use the other callbacks.

var jqXHR;

$('#fileupload').fileupload({
send: function (e, data) {
//where to get the jqXHR??
},
start: function (e) {
$('#loader').show();
},
progress: function (e, data) {
$.each(data.files, function (index, file) {
var rate = (data.loaded / data.total) * 100
$('#prog_rate').text(Math.round(rate) + "% of " + (data.total/1000) + " KBytes ")
});
},
....
});

Thanks for your plugin!

[blueimp]

You can get access to the jqXHR object via the add callback (see API docs one before last section):

$('#fileupload').fileupload({
    add: function (e, data) {
        var jqXHR = data.submit()
            .success(function (result, textStatus, jqXHR) {/* ... */})
            .error(function (jqXHR, textStatus, errorThrown) {/* ... */})
            .complete(function (result, textStatus, jqXHR) {/* ... */});
    }
});

[josegrad]

Thanks for replying so quick blueimp!
I was doing the same as bfavaretto, not using the add callback. Read the comment many times and saw the code you pasted but still...

I didn't use add because the file was being updated automatically and just used the other callbacks I needed.
Now I get the jqXHR and use it with the cancel button which as expected aborts the upload.

var jqXHR = null;
    
$('#fileupload').fileupload({
    add: function (e, data) {
        jqXHR = data.submit();
    },      
    start: function (e) { 
        $('#loader').show();
    },        
    progress: function (e, data) {
        $.each(data.files, function (index, file) {
            var rate = (data.loaded / data.total) * 100
            $('#prog_rate').text(Math.round(rate) + "% of " + (data.total/1000) + " KBytes ")
        });
    },        
    done: function (e, data) {
        $.each(data.files, function (index, file) {
            $('#loader').hide();
            $('#picture_input').hide();
            $('#prog_rate').hide();
        });
    },
    fail: function (e, data) {
        $.each(data.files, function (index, file) {
            $('#loader').hide();
            $('#prog_rate').text("There was some error uploading the picture.")
        });
    }
});        

$('#cancel_button').click(function (e) {
    jqXHR.abort();
});

Thanks a lot.

[intelligence]

I'm having some trouble with creating a custom abort button.
If I only add one file and abort, there's no problem, but if I choose multiple files, it will not abort, just the first file that is aborted.

Here's a video that explains:
http://www.youtube.com/watch?v=7p1me3aL08M

And here's my code:

$('#fileupload').fileupload({
add: function(e, data) {
        $('#controllers').show();
        $('.progress_bar_wrapper').append($('.progress_context:first').clone());
        data.context = $('.progress_context:last');
        data.context.find($('.filename')).html(data.files[0].name);
        data.context.show();
        $('.start').click(function (e) {
            jqXHR = data.submit();
        });
        $('.abort').click(function (e) {
            if(typeof jqXHR != 'undefined') {
                jqXHR.abort();
                data.context.hide('');
            }
            else {
                data.context.hide('');
            }
        });
    }
});

[tevfik6]

Is there any way to cancel individually? When I abort the jqXHR it finishs all the process..
Btw i'm using "sequentialUploads:true".

I need to cancel only current progress. How can i handle it? Thank you.

[bluetwin]

To answer tevfik6 and for others' reference:
Look at jquery.fileupload-ui.js: line 521

_cancelHandler: function (e) {
   e.preventDefault();
   var template = $(e.currentTarget).closest('.template-upload'),
   data = template.data('data') || {};
   if (!data.jqXHR) {
      data.errorThrown = 'abort';
      this._trigger('fail', e, data);
   } else {
      data.jqXHR.abort();
   }
},

Use this callback as a basis and when you create the add callback, make sure the jqXHR is included in the data variable on your data.context..(data.context.data('data', {}); ......data..data...data..data

$('#fileupload').fileupload({
    add: function(e, data) {
         $('.progress_bar_wrapper').append($('.progress_context:first').clone());
        data.context = $('.progress_context:last');
        data.content.find('.abort').click(abortUpload );
        var xhr = data.submit();
        data.context.data('data',{jqXHR: xhr}); // so much data...
    }
)};

function abortUpload (e) {
     e.preventDefault();
     var template = $(e.currentTarget).closest('.template-upload'),
     data = template.data('data') || {}; // data, data , data (queue Monty Python skit)
      if (!data.jqXHR) {
        data.errorThrown = 'abort';
        this._trigger('fail', e, data);
      } else {
        data.jqXHR.abort();
      }
}

I'm sure there is a better work around using sequentialUploads as well as more customized one since this doesn't fit the DRY methodology.

Love the plug-in blueimp

[blueimp]

Thanks @bluetwin :)

[r3plica]

@bluetwin

I tried to modify your code.
I have this:

add: function (e, data) {
        var that = this;
        var file = data.files[0];

        var jqXHR = $.getJSON('/Components/UploadHandler.ashx', { file: file.name }, function (result) {
            var _file = result.file;
            data.uploadedBytes = _file && _file.size;
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });

        var row = $('<tr class="template-upload" id="' + file.name.removeSpecialChars() + '"><td id="file-name">' + file.name + '</td><td id="file-size">' + file.size + '</td><td><div class="progress"><div class="bar" style="width:0%;"></div></div></td><td class="cancel"><button>Cancel</button></td></tr>');
        row.data('data', { jqXHR: jqXHR }).find('.cancel').click(_cancel);
        row.appendTo('#files');

    },

and my _cancel function is exactly the same as your abortUpload function. I have run it and I get to the data.jqXHR.abort(); call but my upload carries on. Any idea why?

[bluetwin]

@r3plica

I'm not 100% sure, since I dont know the entire code, but it looks like the row element needs to be assigned to the data.context.
I would try reworking

add: function (e, data) {
        var that = this;
        var file = data.files[0];
        var row = $('<tr class="template-upload" id="' + file.name.removeSpecialChars() + '"><td id="file-name">' + file.name + '</td><td id="file-size">' + file.size + '</td><td><div class="progress"><div class="bar" style="width:0%;"></div></div></td><td class="cancel"><button>Cancel</button></td></tr>');
        row.appendTo('#files');

        // attach new element to data context
        data.context = row;

        var jqXHR = $.getJSON('/Components/UploadHandler.ashx', { file: file.name }, function (result) {
            var _file = result.file;
            data.uploadedBytes = _file && _file.size;
            $.blueimp.fileupload.prototype
                .options.add.call(that, e, data);
        });

        row.data('data', { jqXHR: jqXHR }).find('.cancel').click(_cancel);        
    },

Also, just looking over the cancel class

'.cancel'

this is the class of the <td> Did you want the click event on the <td> or <button>? if button you would need to change

var row = $('<tr class="template-upload" id="' + file.name.removeSpecialChars() + '"><td id="file-name">' + file.name + '</td><td id="file-size">' + file.size + '</td><td><div class="progress"><div class="bar" style="width:0%;"></div></div></td><td><button class="cancel">Cancel</button></td></tr>');

I've been there with these roadblocks.
Let me know if this helps.

[carlostubff]

@bluetwin Thanks a lot for your first comment showing us an example its been so useful for me

[phpdeveloperrahul]

I am using "basic" example upload plugin to upload file. I am using the example that is on this link.
http://blueimp.github.io/jQuery-File-Upload/basic.html
Now I want to add another button "Cancel upload" besides the "Add files" button. On clicking the "Cancel upload" button the uploading process should be stopped. Please help me out to get around this issue. Thanks

[carlostubff]

@phpdeveloperrahul

This is the way of how i can cancel all upload when you click a button:

1.First you have to bind the fileuploadadd event:

$('#container').bind('fileuploadadd', function(e, data) 
{
      var jqXHR = data.submit(); // Catching the upload process of every file
      $('#cancel_all').on('click',function(e) 
      {
            jqXHR.abort();
      });
});

1. Then you have to bind the cancel event:

   $('#container').bind('fileuploadfail', function(e, data)
   {
   if (data.errorThrown === 'abort')
   {
   //PUT HERE SOME FEEDBACK FOR THE USER
   }
   });

[phpdeveloperrahul]

@carlostubff
Thanks a lot..., it really worked, the way I wanted ! I have been searching extensively to fix the issue and your help proved to of great use for me. Again a many many thanks to you... ! :)

[carlostubff]

@phpdeveloperrahul glad to help you man, i was in your same position few months ago, but know i master this plugin haha i will publish project with a full demo implementation with all the features commented and explained

[miapoulos]

Would fileupload('send').abort() work?

[durasj]

@carlostubff Thank you :)