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

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

17 Answers 1609 Views
Upload
This is a migrated thread and some comments may be shown as answers.
Silver Lightning
Top achievements
Rank 1
Silver Lightning asked on 08 Feb 2015, 11:09 PM
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.

17 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 09 Feb 2015, 08:47 AM

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!
 
0
Silver Lightning
Top achievements
Rank 1
answered on 10 Feb 2015, 02:07 AM
HI Dimiter,

How could I hide the generated select button in kendo Upload?
and trigger it to my custom button?
0
Dimiter Madjarov
Telerik team
answered on 10 Feb 2015, 10:00 AM

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!
 
0
Silver Lightning
Top achievements
Rank 1
answered on 13 Feb 2015, 02:38 AM
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...
0
Dimiter Madjarov
Telerik team
answered on 13 Feb 2015, 07:57 AM

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!
 
0
Silver Lightning
Top achievements
Rank 1
answered on 16 Feb 2015, 02:45 AM
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...
0
Dimiter Madjarov
Telerik team
answered on 16 Feb 2015, 08:35 AM

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!
 
0
Shuja
Top achievements
Rank 1
answered on 29 Sep 2015, 09:25 AM

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

0
Dimiter Madjarov
Telerik team
answered on 29 Sep 2015, 09:50 AM

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!
 
0
Yuriy
Top achievements
Rank 1
answered on 11 May 2017, 03:58 PM

Hi,

Following the "hide the Upload button" question, what event would you use to hide 'clear' and 'upload' buttons (.k-upload-selected .k-clear-selected)? Seams like onSelect event buttons aren't rendered yet.

Please assist,

Thanks,

-Yuriy

0
Nencho
Telerik team
answered on 15 May 2017, 11:10 AM
Hello Yuriy,

You can use the Complete event of the Upload widget, which is triggered, once the file is uploaded and the widget is idle. Please refer to the following dojo example:

http://dojo.telerik.com/@nenchef/eCOsA/3


Regards,
Nencho
Telerik by Progress
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 (charts) and form elements.
0
Yuriy
Top achievements
Rank 1
answered on 15 May 2017, 01:44 PM

Hi Nencho,

Thank you for the response. My case is a bit different. I have autoUpload: false.

What i'm trying to accomplish is to do client form validation on form submit first, and if successful - trigger upload event:

var upload = $("#files").data("kendoUpload");
upload.upload();

 

Than in the upload success event - submit the form.

function onUploadSuccess(e) {
  $("form").submit();
}

 

So, basically, I wan't all chains of event to happen on form "Submit" button click, and avoid having other buttons (like "clear" or "upload") on the form.

Thanks,

-Yuriy

 

0
Nencho
Telerik team
answered on 17 May 2017, 10:44 AM
Hello Yuriy,

Please find the modified dojo example below, where the Clear and Upload buttons are hidden with  style, in combination with the usage of the upload method:

http://dojo.telerik.com/@nenchef/aPOLEm/4

Regards,
Nencho
Telerik by Progress
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.
0
Yuriy
Top achievements
Rank 1
answered on 17 May 2017, 12:40 PM

Hi Nencho,

Thank you for reply, but your example link seams broken. Can you please re-post?

Thanks,

-Yuriy

0
Nencho
Telerik team
answered on 19 May 2017, 08:47 AM
Hello Yuriy,

Excuse me for the broken link. Below you can find the dojo example:

http://dojo.telerik.com/@nenchef/aPOLEm/6


Regards,
Nencho
Telerik by Progress
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 (charts) and form elements.
0
Imran
Top achievements
Rank 1
answered on 21 Jan 2020, 12:12 PM

Hi Nencho,

I have a similar requirement - I have a custom submit button - I need to do some validation on clicking it and then trigger the upload. But I want this same functionality in @progress/kendo-react-upload component , instead of jquery. 

I am able to hide the buttons using showActionButtons: false,  but not able to get any config, which would give me a handle to trigger upload. Tried  $(".k-upload-selected").click() from within my react app, but  $(".k-upload-selected") returns null, when showActionButtons: false, unlike the case when showActionButtons: true. 

However, this would not be the ideal approach to use $(".k-upload-selected").click() from within my react app. 

Please let me know how to trigger upload on click of custom button in kendo-react-upload component ?

 

 

0
Nencho
Telerik team
answered on 23 Jan 2020, 09:17 AM

Hello, Imran,

Could you please post your question in the React forum, as this is the Kendo UI for jQuery. Mixing the technologies would change the focus of the thread and make it less helpful:

https://www.telerik.com/forums/kendo-ui-react/kendoreact-general-discussions 

Thank you in advance!

Regards,
Nencho
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Upload
Asked by
Silver Lightning
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Silver Lightning
Top achievements
Rank 1
Shuja
Top achievements
Rank 1
Yuriy
Top achievements
Rank 1
Nencho
Telerik team
Imran
Top achievements
Rank 1
Share this question
or