Upload async: after widget destroyed/recreated multiple remove HTTP requests are fired

[Taras]

As upload widget does not support modifying files collection after widget's instantiation, I have to destroy and recreate upload widget when I need to modify files.

I noticed that after widget has been destroyed/recreted removing a file fires several HTTP requests to removeUrl, however remove event handler is fired just once. This doesn't happen to upload action. 

In my opinion it's a Kendo UI issue, do you agree?

The following is my code (simplified):

var uploaderOptions = {
    enabled: true,
    files: myCollection,
    async: {
        saveUrl: myUrl1,
        removeUrl: myUrl2,
        autoUpload: true
    },
    upload:  function (e) { /* code here */ },
    remove:  function (e) { /* code here */ },
    success:  function (e) { /* code here */ },
    complete: function (e) { /* code here */ }
};
uploadWidget.clearAllFiles();
uploadWidget.destroy();
uploaderOptions.files = updatedCollection;
uploadWidget = $("#" + attachmentWidgetId).kendoUpload(uploaderOptions).data("kendoUpload");

[Veselin Tsvetanov]

Hello Taras,

In order to properly recreate an Upload widget after it has been destroyed, you will need to remove the DOM elements, that have been automatically generated by the Kendo framework to render the Upload. To do that you could find the element with class .k-upload and remove it from the DOM. Keep in mind, that as the <input type="file"/> of the widget is placed within the .k-upload element, you will have to re-append the input to the DOM.

Having in mind the above, the destroy and recreate logic should be altered to something like the following:

var uploadWidget = $("#files").getKendoUpload();

// You won't need to clear the files as the Upload DOM is entirely removed
// uploadWidget.clearAllFiles();

var uploaderOptions = uploadWidget.options;
uploaderOptions.files = [];

uploadWidget.destroy();

// Get reference to the 'files' <input> element and its .k-upload parent
var uploadInput = $("#files");
var wrapper = uploadInput.parents('.k-upload');
// Remove the .k-upload from the DOM
wrapper.remove();
// Re-append the 'files' <input> to the DOM
$('body').append(uploadInput);

uploadWidget = $("#files").kendoUpload(uploaderOptions).data("kendoUpload");

Here you will find a simple Dojo, that implements the above suggestion.

Regards,
Veselin Tsvetanov
Progress Telerik