Model Binding
The Upload allows you to bind its value to the model and render initial files by using the ngModel directive.
The [(ngModel)]
value gets updated only after the success event is fired, that is, when files are successfully uploaded or removed. To access all selected files and their details, use the event data in the select, upload, or success
event handlers. The event.files
field provides the array of file details.
Binding of File Collections
The Upload accepts values of type FileInfo[]
. Only files which are successfully uploaded will be provided as a value for the ngModel
directive.
When you use the ngModel
directive, the model binding gets executed only after a successful file upload. To add the file to the collection immediately upon selection, drop the ngModel
directive and manually update the collection in the select
event handler of the Upload.
Rendering of Initial Files
The ngModel
directive allows the Upload to render initial files by binding the component to a FileInfo[]
instance which contains the list of files for display. While the FileInfo
object requires you to specify only the name of the file, you can also specify its size.
To set the initially rendered files, either:
- Use a one-way binding with
[ngModel]
. As a result, the Upload will use only thengModel
value to initially fill the files list, or - Use a two-way binding with
[(ngModel)]
. As a result, when the user uploads new files, the Upload will also update thengModel
value.