BlueImp JQuery Upload Not Clearing File Queue After Upload

Question

I have two problems that are probably related. I use the BlueImp Upload plugin to upload multiple files to an ASP.NET MVC controller, which then returns the required JSON response. Download by pressing a button.

I want the bootloader to add a value <ul>for each loaded item to the list item (it works fine). Then I want to update the list that shows the successfully downloaded files. The problem is that even after a successful download, the "old" files remain in the control.

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

The second problem is that I use the progressall callback to monitor when all files have been uploaded OK. For some reason, the code that must be executed in the callback is not executed. The code is annotated to indicate where the problem occurs.

I suspect that the problem is that the control does not recognize that the download has completed, so the problem does not occur with the successful download code and then does not clear the files. I have no idea why!

$('.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?
             }
        });

Answer 1

I ended up with this:

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

, - , DOM. .