Cancel Upload from OnBeforeUpload or disable Upload button

1 Answer 432 Views
Upload
Bob
Top achievements
Rank 1
Bob asked on 16 Nov 2022, 02:13 PM | edited on 16 Nov 2022, 02:14 PM
Upload Control.  I have autoupload set to false.  I'm reading the selected excel file in the OnAdd event to display a preview and allow them to map columns.  I want to be able to disable the Upload button if all the columns aren't mapped OR cancel the upload from OnBeforeUpload.  Is this possible?

1 Answer, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 18 Nov 2022, 01:43 PM

Hi, Bob,

You can disable the Upload button by configuring the `disabled` prop of the component. A sample demonstrating this approach can be found here:

As for the canceling of the upload, you can do it by using the component in controlled mode and managing the `files` collection. For example, you can implement your own files-validation logic in the `onAdd` event of the upload component, and pass only the valid files for the `file` collection that will be uploaded after that. You can use the following sample as a base for such implementation:

Regards,
Vessy
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.

Bob
Top achievements
Rank 1
commented on 18 Nov 2022, 01:55 PM | edited

Thanks Vessy, disabling the whole upload component might work for us.  I don't think cancelling in the onAdd will work for us.  I guess it is not possible to cancel the upload in the onBeforeUpload?
Vessy
Telerik team
commented on 22 Nov 2022, 12:07 PM

Hi, Bob, 

Yes, your assumption is correct - the onAdd event is the earliest moment in which you can modify the files collection and cancel the upload, respectively. You can learn more details about the controlled mode of the Upload component here: 

https://www.telerik.com/kendo-react-ui/components/upload/modes/#toc-controlled-mode

Tags
Upload
Asked by
Bob
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Share this question
or