kendoUpload input element is getting created multiple times

3 posts, 0 answers
  1. Sangram
    Sangram avatar
    3 posts
    Member since:
    Apr 2017

    Posted 19 Sep Link to this post

    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;
      }
    });

  2. Sangram
    Sangram avatar
    3 posts
    Member since:
    Apr 2017

    Posted 19 Sep Link to this post

    Submitted incomplete title by mistake...title : 

    kendoUpload input element is getting created multiple times

  3. Veselin Tsvetanov
    Admin
    Veselin Tsvetanov avatar
    561 posts

    Posted 20 Sep Link to this post

    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
    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