New to Kendo UI for Angular? Start a free 30-day trial

Templates

You can control how the Upload displays the file list by using File template or File Info template, depending on the desired level of customization. In both templates you can:

  • Get a reference to the files which are associated with the current item by using the let-files directive.
  • Get a reference to the current state of each file by using the let-state directive. If the batch option of the Upload is set to true, let-state reflects the state of the whole batch.
  • Get a reference to the instance of the Upload component. It is exported as kendoUpload by using the exportAs metadata property.

File Template

The File Template allows full customization of the items in the file list. Therefore, all built-in items, such as progressbar, action buttons, file size, name and icon, will be replaced by the content provided inside the template.

To define the File Template, nest a <ng-template> tag with the kendoUploadFileTemplate directive applied to it inside the <kendo-upload> selector.

Example
View Source
Edit In Stackblitz  
Change Theme:

File Info Template

The File Info Template is used for customizing the general file information section, while preserving the rest of the built-in features, such as file icon, progressbar and action buttons.

To define the File Template, nest a <ng-template> tag with the kendoUploadFileInfoTemplate directive applied to it inside the <kendo-upload> selector.

Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?