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
Hello Jesureno,
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
How could I hide the generated select button in kendo Upload?
and trigger it to my custom button?
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
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...
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
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...
Hello Jesureno,
In this case you could use the same logic in document.ready. Here is the updated example.
Regards,Dimiter Madjarov
Telerik
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
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.
Dimiter Madjarov
Telerik
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
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
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
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
Hi Nencho,
Thank you for reply, but your example link seams broken. Can you please re-post?
Thanks,
-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
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 ?
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