Anarkie Anarkie - 17 days ago 90
TypeScript Question

Browse the same file again and again in html

I have the following code on my html

<input type="file" style="display: none" #file(change)="processImage($event)" />
<button type="button" class="btn" (click)="file.click()" Browse </button>


I choose image1 from desktop, it is loaded on html by
processImage()
then I delete it with delete button. Then I browse again and choose image1 again but nothing happens, when I choose image2, then it is loaded, afterwards I choose image1 it is again loaded. In summary choosing the same image again does nothing, probably it isn't a change event. It also makes sense. But for some reason a user may load it again and again after loading and deleting.

How I display the image:

<div *ngIf="isImageLoaded" class="showImg"><img [src]="myImage"></div>


Any tips to be able to load the same image and fire
processImage()
?

Answer Source

You have to clear event.currentTarget.value as below, I have tried locally and it works fine. whenever you select any image even it repeat always fire processImage method.

public processImage(event:any):void{
     //your logic    
     event.currentTarget.value='';
}