kendoUpload input element is getting created multiple times

[Sangram]

Hi , 

    I am working with Kendo UI version 2017.3.913 for Jquery and using kendoUpload widget,the issue I am encountering is whenever I am selecting a file/files from explorer window which opens after clicking "Select file",the "input" DOM element of kendoUpload is created again and hence I am having multiple duplicated DOM "Input" elements with same id/name,hence is causing the issues with desired functionality of the project as I want to register a click handler on the kendoUpload widget.I am using the widget inside a window.Overall issue is very similar to the existing thread : http://www.telerik.com/forums/one-file-selection-causes-multiple-instances-are-created ,one difference being in my case the Input DOM element is getting created multiple times on the UI/Client side only,but the call of uploading documents is going exactly once(which is expected and right behaviour). 

   HTML:

 <form enctype="multipart/form-data" id='_duFrmdocForm_' action='uploadDoc' method='POST'    enctype="multipart/form-data">

 

<span>
         <div style="display: none">
                <input id="_ignore" name="_Ignore" />
         </div>
        </span> <span>
        <div style="display: none">
              <input id="action" name="Action" />
        </div>
       </span> <span>
       <div style="display: none">
            <input id ="data" name="Data" />
      </div>
 </span>

 <input id="duFiles" name="files[]" type="file" aria-label="files" />

</form>

   Initialization code : 

  $('#duFiles').kendoUpload({
   async : {
   "saveUrl" : "uploadDoc",
   "autoUpload" : false,
   "batch" : true
   },
   upload : function(e) {
      var data = {}; 
      var payloadData = {
         "test" : "abc"
      };
      $('#data')).val(JSON.stringify(payloadData));
      var form = $('#duFrmdocForm')).serializeArray();

      $.each(form, function() {
         data[this.name] = this.value;
     });

     e.data = data;
  }
});

[Sangram]

Submitted incomplete title by mistake...title : 

kendoUpload input element is getting created multiple times

[Veselin Tsvetanov]

Hi Sangram,

The Kendo Upload will automatically create a new hidden (display="none") <input type="file"> element each time new file / files are selected in the widget. All those <input> elements will have the same name attribute. Nevertheless, none of them should have an id. The only element with an ID will remain the initial <input> from which the Upload widget has been initialized.

If you need to attach an event handler to the original <input> you could do so by using its ID.

Here you will find a Dojo sample, based on the snippets sent. As you will see, the Upload widget properly sends all the selected files to the server.

I hope, that the above explains the case. If you have any other questions, please do not hesitate to contact us.

Regards,
Veselin Tsvetanov
Progress Telerik

[Sangram]

Hi Veselin,

     I tried to register an event handler to the "Select File" button of kendo upload by providing "id" to it as you mentioned,but the issue is handler is getting called only once(on the first "select file" click).For subsequent calls it is not getting called.Desired behaviour is to call it each time "Select File" button is clicked.
Event Handler :

$('#duFiles').click(function(e) {

     console.log('clicked');
})

sample dojo

[Veselin Tsvetanov]

Hi Sangram,

You will need to re-attach the Kendo Upload button handler on each file selection. Therefore, I would suggest you to implement the following Upload select event handler:

select: function(e) {
  setTimeout(function() {
    $('#duFiles').click(function(e) {
      console.log('clicked');
    })
  }, 0);
},

Here you could find a modified version of the Dojo. You will also notice, that I have moved the initial click handler definition within the $(document).ready() function.

Regards,
Veselin Tsvetanov
Progress Telerik