CODEWITHSUNDEEP
jqueryajaxfile-uploaduploadblueimp
Graham
Graham

Reputation: 1517

BlueImp JQuery Upload Not Clearing File Queue after Upload

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?
             }
        });

Upvotes: 4

Views: 1208

Answers (1)

HackWeight
HackWeight

Reputation: 316

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.

Upvotes: 1

Related Questions