Input File onchange event not firing

angular input

The most reliable way to achieve this cross browser and without having to change much code is to set the value of the input to null on click.

onclick="this.value = null"

So your input would look like this

<input name="file" type="file" onclick="this.value = null" (change)="onChange($event)" style="width:80%"/>

Here is an working example: plnkr

angular input

You need to clear the value of file input. As if you select the file it matches with the value and if value is same then no change event.

You need to use native onclick of JS

<input name="file" type="file" onclick="value = null" (change)="onChange($event)" style="width:80%"/>

if you use Angular's (click) then it will set the ts variable value which can cause error as it will be not declared in your ts file.

If you want to use angualr's (click) event then use template variable like this

<input name="file" type="file" (click)="myInputFile.value = null" (change)="onChange($event)" style="width:80%" #myInputFile/>

CodeHunter