NgModel on Input type file

Question

I'm trying to make a binding to an input field type file through ngModel on the typical Angular way like this:

<input type="file" id="fileUpload" [(ngModel)]="file">

and

files:any

My problem is that after I have chosen a file, the value of my variable files is still undefined Here an example with stackblitz: https://stackblitz.com/edit/angular-6mbdww

Possible duplicate of [Angular 2 File upload from input type=file](https://stackoverflow.com/questions/35399617/angular-2-file-upload-from-input-type-file) — Akash Agrawal, Jan 18 '18 at 12:03

Ashraful Islam · Accepted Answer · 2018-01-18T12:11:14.053

19

You have to do it externally through (change) event

<input (change)="onFileChange($event)" type="file" id="fileUpload">

And access in the ts file like the below code

  files: any[];

  onFileChange(event){
    this.files = event.target.files;
    console.log(event);
  }

edited Jan 18 '18 at 12:11

answered Jan 18 '18 at 12:07

Ashraful Islam

1,228
10
13

we don't need `ngModel` in that case – Aravind Jan 18 '18 at 12:10
1

i did the same but how to clear the selected file after submit ? – Jepzen Dec 19 '18 at 14:21
1

@Jepzen `event.target.value = null` – Sameer Jan 21 '20 at 05:34
1

What if, I want to show a previously saved file. The change event on that case will not work. – Cengiz Araz May 28 '21 at 07:34

NgModel on Input type file

1 Answers1

Linked