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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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.

Example
View Source
Edit In Stackblitz  
Change Theme:

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 the ngModel 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 the ngModel value.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?