parametros - ¿Cómo restablecer el archivo seleccionado con el tipo de archivo de etiqueta de entrada en Angular 2?
pasar parametros entre componentes angular 4 (10)
Así es como se ve mi etiqueta de entrada:
<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>
Quiero restablecer el archivo seleccionado en Angular 2. La ayuda sería muy apreciada. Déjeme saber si usted necesita más detalles.
PD
Podría obtener detalles del archivo de
$event
parámetros
$event
y guardarlo en una variable de mecanografiado, pero esta variable no está vinculada a la etiqueta de entrada.
Creo que es simple, use #variable
onChange(event) {
// Get your files
const files: FileList = event.target.files;
// Clear the input
event.srcElement.value = null;
}
La opción "variable.value = null" también está disponible
He agregado esta etiqueta de entrada en la etiqueta de formulario.
<form id="form_data">
<input type="file" id="file_data" name="browse"
(change)="handleFileInput($event, dataFile, f)" />
</form>
I angular typecript, he agregado líneas debajo, obtengo su identificación de formulario en formularios de documento y hago que ese valor sea nulo.
for(let i=0; i<document.forms.length;i++){
if(document.forms[i].length > 0){
if(document.forms[i][0][''value'']){ //document.forms[i][0] = "file_data"
document.forms[i][0][''value''] = "";
}
}
}
Imprima document.forms en la consola y puede hacerse una idea.
Normalmente restablezco la entrada de mi archivo después de capturar los archivos seleccionados.
No es necesario presionar un botón, tiene todo lo necesario en el objeto
$event
que está pasando a
onChange
:
import { Component } from ''@angular/core'';
@Component({
selector: ''my-app'',
template: `
<input #myInput type="file" placeholder="File Name" name="filename">
<button (click)="myInput.value = ''''">Reset</button>
`
})
export class AppComponent {
}
Flujo de trabajo diferente, pero el OP no menciona que presionar un botón es un requisito ...
Puede usar
ViewChild
para acceder a la entrada en su componente.
Primero, debe agregar
#someValue
a su entrada para poder leerlo 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 desde la plantilla:
@ViewChild(''myInput'')
myInputVariable: ElementRef;
Ahora puede usar
myInputVariable
para restablecer el archivo seleccionado porque es una referencia para ingresar con
#myInput
, por ejemplo, crear método
reset()
que se llamará al
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 atributo
FileList
de entrada es de
FileList
lectura
, por lo que es imposible eliminar el elemento de la matriz.
Aquí está trabajando
Plunker
.
Una forma de lograrlo es envolver su entrada en la etiqueta
<form>
y restablecerla.
Tampoco estoy considerando adjuntar un formulario thr a
NgForm
o
FormControl
.
@Component({
selector: ''form-component'',
template: `
<form #form>
<input type="file" placeholder="File Name" name="filename">
</form>
<button (click)="reset()">Reset</button>
`
})
class FormComponent {
@ViewChild(''form'') form;
reset() {
this.form.nativeElement.reset()
}
}
Versión corta Plunker :
import { Component } from ''@angular/core'';
@Component({
selector: ''my-app'',
template: `
<input #myInput type="file" (change)="onChange(myInput.value, $event); myInput.value = ''''" placeholder="File Name" name="filename">
`
})
export class AppComponent {
onChange(files, event) {
alert( files );
alert( event.target.files[0].name );
}
}
Y creo que el caso más común es no usar el botón pero reiniciar automáticamente. Las declaraciones de plantilla angular admiten expresiones de encadenamiento, por lo que Plunker :
<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='''' ">
<button>Reset</button>
Y un enlace interesante sobre por qué no hay recurrencia en el cambio de valor.
modelo:
<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">
componente:
fileChange(event) {
alert(this.torrentFileValue);
this.torrentFileValue = '''';
}
}
Angular 5
html
<input type="file" #inputFile>
<button (click)="reset()">Reset</button>
modelo
@ViewChild(''inputFile'') myInputVariable: ElementRef;
reset() {
this.myInputVariable.nativeElement.value = '''';
}
No se requiere botón. Puede restablecerlo después del evento de cambio, es solo para demostración
Si tiene problemas con ng2-file-upload,
HTML:
<input type="file" name="myfile" ` **#activeFrameinputFile** `ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />
componente
import { Component, OnInit, ElementRef, ViewChild } from ''@angular/core'';
@ViewChild(''`**activeFrameinputFile**`'') `**InputFrameVariable**`: ElementRef;
this.frameUploader.onSuccessItem = (item, response, status, headers) => {
this.`**InputFrameVariable**`.nativeElement.value = '''';
};
<input type="file" id="image_control" (change)="validateFile($event)" accept="image/gif, image/jpeg, image/png" />
validateFile(event: any): void {
const self = this;
if (event.target.files.length === 1) {
event.srcElement.value = null;
}
}