Hello,
I'm using Kendo UI for Angular's Upload component and implementing a custom upload mechanism via the upload event handler. The goal is to post the file before form submit (reactive form dynamically generated) and on submit only filename will be passed to form).
The problem is that although I've implemented custom upload handler, component is trying to post the file (at least I see POST to localhost in network tab)? Solved this with `e.preventDefault()` which uploads file correctly, but file is removed from kendo-upload and there is no info if it's uploaded.
<kendo-upload
[multiple]="false"
(upload)="uploadEventHandler($event)">
</kendo-upload>
uploadEventHandler(e: UploadEvent) {
this.file = e.files[0].rawFile;
this.uploadStatus = 'uploading';
this.fileUploadService.mediaUpload(this.file, this.question).subscribe({
next: () => {
this.uploadStatus = 'success';
this.control.setValue(this.file?.name);
},
error: (error: any) => {
this.uploadStatus = 'error';
this.errorMessage = this.getUserFriendlyErrorMessage(error);
},
});
e.preventDefault();
}1 Answer, 1 is accepted
Hi,
When using the Upload component with a custom upload event handler, calling e.preventDefault() prevents the built-in upload process. However, this also signals to the component that the upload was canceled, so the files are also removed from the file list in the UI. This is the expected behavior of the component when the default upload event is prevented:
With the above being said, by default, the Upload component does initiate a POST request upon file selection. Thus, to prevent the Upload component from automatically triggering a POST request without using e.preventDefault() in the upload event, the developer can set the autoUpload option to "false". This allows you to edit the uploaded file or perform any other desired logic before sending the file to the server:
Having done that, the developer can trigger the upload manually using a custom button or event with the help of the uploadFiles method. For demonstration of such a scenario, I am linking below a Knowledge Base article that explains how to upload files manually using an external button:
As it seems like there is an issue with the demo in the article, here is also the working StackBlitz example where the developer can observe the suggested approach in action:
We will make sure to update the demo in the Knowledge Base article accordingly so it will behave according to the expectations.
FileSelect for Full Manual Control
Alternatively, if you want full control over the process of creating the server requests and sending forms, consider using the FileSelect component, which only handles file selection and leaves all upload logic and UI management to the developer:
I hope the provided information is suitable for your scenario.
Regards,
Zornitsa
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Thank you very much for detail answer
Just a note: Tried also autoUpload=false but upload button was submitting my form (doesn't have `type=button` set and kendo-upload was inside reactive form component) and I wanted to upload immediately. Currently using custom upload and added custom filelist for uploaded elements. FileSelect looks like good alternative.
Hi,
I am glad that you have found an approach that fits your scenario and achieves the desired Upload behavior.
Indeed, the FileSelect component is a suitable alternative to the Upload in cases when the developer wants to have manual control over the upload operations and server requests, while the file list selection is handled by the component.
Feel free to write back if any additional questions arise.
Regards,Zornitsa
Progress Telerik