Puede utilizar ViewChild
para acceder a la entrada en su componente. Primero, debe agregar #someValue
a su entrada para que pueda leerla en el componente:
<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
Luego, en su componente, debe importar ViewChild
desde @angular/core
:
import { ViewChild } from '@angular/core';
Luego usa ViewChild
para acceder a la entrada de la plantilla:
@ViewChild('myInput')
myInputVariable: ElementRef;
Ahora puede usar myInputVariable
para restablecer el archivo seleccionado porque es una referencia para ingresar #myInput
, por ejemplo, crear un método reset()
que se llamará en el click
evento de su botón:
reset() {
console.log(this.myInputVariable.nativeElement.files);
this.myInputVariable.nativeElement.value = "";
console.log(this.myInputVariable.nativeElement.files);
}
Primero console.log
imprimirá el archivo que seleccionó, segundo console.log
imprimirá una matriz vacía porque this.myInputVariable.nativeElement.value = "";
elimina los archivos seleccionados de la entrada. Tenemos que usar this.myInputVariable.nativeElement.value = "";
para restablecer el valor de la entrada porque el FileList
atributo de la entrada es de solo lectura , por lo que es imposible eliminar el elemento de la matriz. Aquí está trabajando Plunker .