angularinput

Input File onchange event not firing

I am trying to fire onchange event everytime a file is selected. It does fire if the file I select is different, however, I wanted to fire even if the same file is selected twice.

html

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

component

onChange(event: any) {
   let files = event.srcElement.files;
   this.files = files;
   event= null;
}
Solution

  • 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