Hide the default 'select' button in kendo upload and trigger it using my mySelectButton click

10 posts, 0 answers
  1. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 08 Feb 2015 Link to this post

    Hi Telerik team,

    Good day to all.

    I would like to ask, on how could I hide the default  Kendo generated select button, hide it, then trigger the click event in mySelectButton's click?

    Thank you in advance for your immediate assitance.
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 09 Feb 2015 Link to this post

    Hello Jesureno,

    Opening the file selection dialog via JavaScript is straight forward - you could trigger the click event of the <input type="file" /> element.
    E.g.
    $("#files").click();

    Nevertheless this will cause issue in some Internet Explorer versions, which have a security feature to prevent uploading files that are not selected purely by user interaction. This applies to <input type="file' /> elements in general.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 09 Feb 2015 in reply to Dimiter Madjarov Link to this post

    HI Dimiter,

    How could I hide the generated select button in kendo Upload?
    and trigger it to my custom button?
  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 10 Feb 2015 Link to this post

    Hello Jesureno,

    You could access the button by it's k-upload-button class and set it's visibility to hidden. Then you could trigger the click event of the input field.

    As stated previously the approach is not supported because it will cause security issues in some browsers.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 12 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    Good day!

    if I will set to hide the k-upload-button class, what event could I put it?
    when I tried to put it on 'select' event in kendo upload. The program stops (hang).

    Can you give me a sample code or solution on how could I hide it in a proper way?

    Thank you in advance and God bless...
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 13 Feb 2015 Link to this post

    Hello Jesureno,

    Here is an example in which I am hiding the button in the select event. It is working as expected on my side.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Silver Lightning
    Silver Lightning avatar
    44 posts
    Member since:
    Feb 2014

    Posted 15 Feb 2015 in reply to Dimiter Madjarov Link to this post

    Hi Dimiter,

    Good day...

    Thanks for your assistance..
    But what all I need is to hide the select button, and put it on my custom button (eg. mySelectButton).

    I want to hide the select button generated by kendo from the start before I select I file, and show the custom mySelectButton to choose a file for upload.

    Thank you in advance for your kind help...
  9. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 16 Feb 2015 Link to this post

    Hello Jesureno,

    In this case you could use the same logic in document.ready. Here is the updated example.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  10. Shuja
    Shuja avatar
    30 posts
    Member since:
    Mar 2011

    Posted 29 Sep 2015 in reply to Dimiter Madjarov Link to this post

    Hi,

     

    Your example doesn't show anything. It appears blank.

    I need the upload to allow multiple files, disable auto upload and hide the upload file button which appears after you select a file.

    I can trigger the upload button in a custom button using $(".k-upload-selected").trigger('click');

    But I need to hide the upload file button when auto upload is disabled so users can't upload the file until it's triggered from the custom button.

    Is this possible?

    Regards,

    Shuja

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 29 Sep 2015 Link to this post

    Hello Shuja,

    It doesn't show anything, because the requested demo was to hide the upload "Select" button.

    Regarding the current question, this functionality is possible. You could access the upload button via it's k-upload-selected CSS class and hide it.

    Regards,
    Dimiter Madjarov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready