# Model Binding

The FileSelect allows you to bind its value to the model and render initial files by using the [ngModel](https://angular.io/guide/forms#two-way-data-binding-with-ngmodel) directive.

> Contrary to the Upload component, the value of the FileSelect is a collection of [File](https://developer.mozilla.org/en-US/docs/Web/API/File) instances.

The `[(ngModel)]` value gets updated when files are successfully selected or removed. To access all selected files and their details, you could use the event data in the [select](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/selectevent) and [remove](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/removeevent) event handlers. The `event.files` field provides the array of file details.

## Binding of File Collections

The FileSelect emits values of type [File\[\]](https://developer.mozilla.org/en-US/docs/Web/API/File) each time a file is selected or removed.

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

## Rendering of Initial Files

The `ngModel` directive allows the FileSelect to render initial files in the list. This could be achieved by passing a collection containing the list of files for display. Those could be of type:

* [File](https://developer.mozilla.org/en-US/docs/Web/API/File) - actual files, which were previously uploaded, created client side etc.
* [FileInfo](https://www.telerik.com/kendo-angular-ui-develop/components/uploads/api/fileinfo) - mocks of previously uploaded files, which only contain information for display. The `FileInfo` object requires just the name of the file to be specified, but you can also specify its size.

To set the initially rendered files, either:

* Use a one-way binding with `[ngModel]`. As a result, the FileSelect will use only the `ngModel` value to initially fill the files list, or
* Use a two-way binding with `[(ngModel)]`. As a result, when the user selects new files, the FileSelect will also update the `ngModel` value.

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

## Suggested Links

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