Geek Answers Handbook

Angular 2 - Reset value of an INPUT FILE element type

In an angular2 application, I have an innocent INPUT html element (type FILE) that 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 select RESET as soon as the user presses the reset button. I can do this easily if I use the @ViewChild decorator and manipulate the input element through code, i.e.

@ViewChild('selectedImage') selectedImageFile;

reset() {
    this.selectedImageFile.nativeElement.value = '';
}

Now I would like to do the same through 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 is not cleared when I press the RESET button). I am sure that I am missing something quite trivial, but, as sometimes happens, my eyes are now blind. Any help would be appreciated.

+4
1

, , , selectedImageFile != '' Angular, .

reset() '', , .

!= '' , <input type="file"> , ''.

0

More articles:


All Articles