Change event function not working on input type file if file name is same

Question

This is my html code to upload excel file

 <span class="control-fileupload" >
      <label for="file1" class="text-left">{{filePlaceHolder}}</label>
      <input type="file" id="file1" value="" (change)="openFile($event)" >
 </span>

But the problem is if i'm uploading same file twice the change function is not executing again because there is no change in input field.

Suppose i have uploaded abc.xls file once and there are some validation on this file and if i change the content of abc.xls and re upload it then change function is not re validating it again.

What changes i should make to work change function every time i upload a file whether file name is same or not.

I want to know how to write this click function in type script as i'm new to this.

Answer 1

In angular 2 you can do it like this:

<span class="control-fileupload" >
      <label for="file1" class="text-left">{{filePlaceHolder}}</label>
      <input #fileInput type="file" id="file1" (click)="fileInput.value = null" value="" (change)="openFile($event)" >
 </span>

This way every time you click on file input it will clear it's value so even if you select the same file change will fire.