BlueImp JQuery Upload Not Clearing File Queue after Upload

Question

I have two problems, which are probably related. I am using BlueImp's Upload plugin to upload multiple files to an ASP.NET MVC controller which then returns the required JSON response. The upload is being triggered by a button click.

I want the uploader to add in a list item to a <ul> for each item being uploaded (working fine). I then want to refresh a list which shows the successfully uploaded files. The problem is that even after a successful upload, the 'old' files remain in the control.

For example, if I upload two files successfully, when I then want to upload two more, four files are being sent to the controller.

The second problem is that I am using the progressall callback to monitor when all files have been uploaded OK. For some reason, the code which should be executed within the callback is not being executed. The code is annotated to indicate where the problem is occurring.

I suspect that there is an issue with the control not recognising that the uploads have finished, hence the problem with not executing the successful upload code, and then in not clearing out the files. I have no idea why though!

$('.filemanager-browse').fileupload({
            url: '/Files/UploadFile',
            dataType: 'json',
            singleFileUploads: false,
            add: function (e, data) {

                var queue = $("ul.queue");

                $(".upload-button").click(function () {

                    $.each(data.files, function (index, file) {
                        var queueItem = $("<li>Uploading: " + file.name + "</li>");
                        data.context = queueItem.prependTo(queue);
                    });

                    data.submit();
                });
            },
            progress: function (e, data) {

                $.each(data.files, function (index, file) {
                    /// Code to indicate the progress of individual uploads as the progress. Working fine.
                });

            },
            done: function (e, data) {

                $.each(data.files, function (index, file) {
                    /// Code to indicate that each file has been uploaded. Working fine.
                });

            },
            error: function (e, data) {

                $.each(data.files, function (index, file) {
                    /// Code to indicate any errors.
                });
            },
            progressall: function (e, data) {

                if (data.loaded == data.total) {
                    // SOURCE OF PROBLEM 2: 
                    // CODE IN HERE NOT EXECUTING AFTER SUCCESSFUL UPLOAD
                }
            },
            always: function (e, data) {

            },
            stop: function (e, data) {
                // Should code that is in progress all be in here instead?
             }
        });

Did you manage to solve this? Help!

Andrew
– Andrew

2014-12-16 23:29:37 +00:00
Commented Dec 16, 2014 at 23:29 — Andrew
– Andrew, Commented Dec 16, 2014 at 23:29
No - still completely stumped.

Graham
– Graham

2014-12-18 11:41:04 +00:00
Commented Dec 18, 2014 at 11:41 — Graham
– Graham, Commented Dec 18, 2014 at 11:41

HackWeight · Accepted Answer · 2015-08-13 20:56:34Z

1

I ended up doing this:

$('#fileupload').fileupload()
  .bind('fileuploadadd', function(e, data) {
    $(".files tr").remove();
  });

So whenever someone adds a file, all the rows in the table with class 'files' are removed from the DOM. Depending on your markup, you may need to select different elements to remove.

answered Aug 13, 2015 at 20:56

HackWeight

3166 silver badges16 bronze badges

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

Collectives™ on Stack Overflow

BlueImp JQuery Upload Not Clearing File Queue after Upload

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related