Angular 2 - Reset value of INPUT element type FILE

Viewed 5969

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.

1 Answers
Related