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

2 posts, 0 answers
  1. Taras
    Taras avatar
    46 posts
    Member since:
    May 2015

    Posted 13 Jun 2017 Link to this post

    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");
  2. Veselin Tsvetanov
    Veselin Tsvetanov avatar
    1201 posts

    Posted 15 Jun 2017 Link to this post

    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.
Back to Top