How to cancel the uploading of a single file, using the Blueimp jQuery File Upload

Question

I am using the Blueimp jQuery File Upload and it's working fine, but I have a problem with canceling the upload of one of the files.

When I add a file, I append to the html one fieldset with some additional inputs and one button - "cancel". What I need is something like this:

$(".cancelUpload").on("click", function(){
      //remove this file from the queue, The data and the file will not be uploaded
})

Here is a part of my code

$('#MappeFile').fileupload({
        dataType : 'json',
        autoUpload : false,
        maxNumberOfFiles : undefined,
        maxFileSize : 2000,
        minFileSize : undefined,
        acceptFileTypes : /.+$/i,
        url : "/ajax/UploadFile.php",
        add : function(e, data) {
            $("#fileUploadButton").removeClass("toHide").on("click", function() {
                $('#progress .bar').show();
                if ($.browser.msie && parseInt($.browser.version, 10) < 10) {
                    $('#progress .bar').css({
                        "background" : "url(images/progressbar.gif) no-repeat",
                        "width" : "100%"
                    })
                } else {
                    $('#progress .bar').css({
                        'background-color' : "#2694E8",
                        'width' : '0%'
                    });
                }
                data.formData=$("form").serializeArray();
                data.submit();
                $("#fileUploadButton").off("click").addClass("toHide")

            })
        },
        change : function(e, data) {
            $.each(data.files, function(index, file) {

                filesCount++;
                vOutput = "<fieldset class='FileUploadFieldset'>"
                vOutput += "<legend>" + file.name + "</legend>"
                vOutput += "<label>Dateiname:</label><input type='text' value='"+file.name+"' name='Dateiname"+filesCount+"' size='50' class='UploadDateiName inputMaske'/><input type='text' class='toHide originName' name='originName"+filesCount+"' value='"+file.name+"'/>"
                vOutput += "<label>Dokumentdatum</label><input type='text' name='Datum"+filesCount+"' class='UploadDatum inputMaske'>"
                vOutput += "<label>Berater:</label><select name='Berater"+filesCount+"' class='UploadBeraterSelect inputMaske'></select>"
                vOutput += "<fieldset><legend>Kategorie:</legend><div class='UploadKategorie'></div></fieldset>"
                vOutput += "<fieldset><legend>Bemerkung:</legend><textarea name='Bemerkung"+filesCount+"' class='UploadBemerkung inputMaske'></textarea></fieldset>"
                vOutput += "<input type='button' class='cancelUpload neuButton' value='cancel'/>"
                vOutput += "</fieldset>"
                $("#MappeFilesToUpload").append(vOutput);   
            });
        }
    });

Guilherme Torres Castro · Accepted Answer · 2012-12-07 16:24:13Z

1

+50

If you are using fileupload-ui.js you just need to add a class "cancel" and it will be automatic bind to cancelHandler.

Try to update this line:

 vOutput += "<input type='button' class='cancelUpload neuButton' value='cancel'/>"

to:

    vOutput += '<div class="cancel"> <button> cancel </button> </div>'

If you are using just the core plugin take a look at this lines to see what you need to do.

From fileupload-ui.js:

   _initEventHandlers: function () {
        this._super();
        this._on(this.options.filesContainer, {
            'click .start button': this._startHandler,
            'click .cancel button': this._cancelHandler,
            'click .delete button': this._deleteHandler
        });
        this._initButtonBarEventHandlers();
    },

    .
    .
    .

    _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();
        }
    },

edited Dec 7, 2012 at 16:24

answered Dec 5, 2012 at 14:35

Guilherme Torres Castro

15.4k7 gold badges62 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dirty-flow Over a year ago

this will reset the whole form, but I want to cancel only one of the files, not all

Guilherme Torres Castro Over a year ago

Did you tried ? I think each file is submitted on a diferent form create on the fly

Dirty-flow Over a year ago

the page got refreshed when I click on the cancel button...and I have no idea why

Collectives™ on Stack Overflow

How to cancel the uploading of a single file, using the Blueimp jQuery File Upload

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related