# Templates

You can control how the FileSelect displays the file list by using either the [`FileTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/filetemplatedirective) or [`FileInfoTemplateDirective`](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileinfotemplatedirective) depending on the desired level of customization.

The following values are available as context variables in both templates:

* `let-files`—A reference to the files which are associated with the current item.
* `let-state`—A reference to the current state of each file.

## File Template

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

To use the `FileTemplateDirective`, nest the `<ng-template>` tag inside the `<kendo-fileselect>` selector and apply the [`kendoFileSelectFileTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/filetemplatedirective) directive to it.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/uploads/fileselect/file_template/source.txt)

## File Info Template

The `FileInfoTemplateDirective` is used for customizing the general file information section, while preserving the rest of the built-in features of the file list, such as the file icon.

To use the `FileInfoTemplateDirective`, nest the `<ng-template>` tag inside the `<kendo-fileselect>` selector and apply the [`kendoFileSelectFileInfoTemplate`](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileinfotemplatedirective) directive to it.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/uploads/fileselect/file_info_template/source.txt)

## Suggested Links

* [API Reference of the FileSelect](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileselectcomponent)