This is a migrated thread and some comments may be shown as answers.

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

1 Answer 319 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 2
Taras asked on 13 Jun 2017, 11:05 AM

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 */ }

// When we need to modify files collection:

// Hack that helps avoid multiple requests: uploadWidget._submitRemove = function () { };

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

1 Answer, 1 is accepted

Sort by
Veselin Tsvetanov
Telerik team
answered on 15 Jun 2017, 08:00 AM
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 = [];
// 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
// Re-append the 'files' <input> to the DOM
uploadWidget = $("#files").kendoUpload(uploaderOptions).data("kendoUpload");

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

Veselin Tsvetanov
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Asked by
Top achievements
Rank 2
Answers by
Veselin Tsvetanov
Telerik team
Share this question