In an angular2 app I have an innocent html INPUT element (type FILE) which I use to select a file. Here is the guy
<input #selectedImage id="selectImage" type="file" name="image" (change)="imageSelected($event)">
I need to be able to RESET the selection once the user clicks the 'reset' button. I can do this easily if I use @ViewChild decorator and manipulate the input element via code, i.e.
@ViewChild('selectedImage') selectedImageFile;
reset() {
this.selectedImageFile.nativeElement.value = '';
}
Now I would like to do the same via property binding and here I find obstacles. I change the code as follows
<input id="selectImage" type="file" name="image" value={{selectedImageFile}} (change)="imageSelected($event)">
reset() {
this.selectedImageFile = '';
}
but now nothing works (i.e. the selection of the INPUT element gets not cleared when I click the reset button). I am sure I am missing something pretty trivial but, as sometimes happens, my eyes are blind now. Any help would be appreciated.