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

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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 ...

Answer 4

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 .

Answer 5

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()
}
}

https://plnkr.co/edit/Ulqh2l093LV6GlQWKkUA?p=preview

Answer 6

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.

Answer 7

modelo:

<input [(ngModel)]="componentField" type="file" (change)="fileChange($event)" placeholder="Upload file">

componente:

fileChange(event) {
alert(this.torrentFileValue);
this.torrentFileValue = '''';
}
}

Answer 8

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

Answer 9

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 = '''';
};

Answer 10

<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;
}
}