Model Binding

The FileSelect allows you to bind its value to the model and render initial files by using the ngModel directive.

Contrary to the Upload component, the value of the FileSelect is a collection of 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 and remove event handlers. The event.files field provides the array of file details.

Binding of File Collections

The FileSelect emits values of type File[] each time a file is selected or removed.

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 - actual files, which were previously uploaded, created client side etc.
• 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.

Suggested Links

• API Reference of the FileSelect