Uploading Files by Using External Button

Environment

Description

How can I upload files in the Kendo UI for Angular Upload by using an external button?

Solution

By default, when the autoUpload option is set to false, the Upload component renders the Clear and Upload buttons under the selected files.

To hide the default buttons, apply custom CSS.

1. Set the Angular ViewEncapsulation to None. Otherwise, the custom styles will not be applied unless they are provided on a global level.

   Copy Code.k-actions {
     display: none
   }

2. Create custom buttons to upload and clear the selected files by utilizing the uploadFiles and clearFiles methods in the click handler function.

The following example demonstrates the full implementation of the suggested approach.