¿Cómo restablecer el archivo seleccionado con el tipo de archivo de etiqueta de entrada en Angular 2?

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. Avísame si necesitas más detalles.

P.d.

Podría obtener los detalles del archivo de los parámetros $event y guardarlo en una variable typescript, pero esta variable no está vinculada a la etiqueta de entrada.

 38
angular
Author: akash, 2016-10-21
Source

6 answers

Puede usar ViewChild para acceder a la entrada en su componente. Primero, necesitas agregar #someValue a tu entrada para que puedas leerla en el componente:

<input #myInput type="file" placeholder="File Name" name="filename" (change)="onChange($event)">

Entonces en tu componente necesitas 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 a la entrada con #myInput, por ejemplo, create method reset() que se llamará en 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 ha seleccionado, segundo console.log imprimirá un array vacío 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 la entrada es readonly, por lo que es imposible simplemente eliminar el elemento de la matriz. Aquí está trabajando Plunker .

 95
Author: Stefan Svrkota,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-07-16 15:02:14

Una forma de lograrlo es envolver su entrada en la etiqueta <form> y restablecerla.

No estoy considerando adjuntar el formulario a NgForm o FormControl tampoco.

@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

 10
Author: Edmar Miyake,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-10-20 22:34:50

Angular 5

Html

<input type="file" #inputFile>

<button (click)="reset()">Reset</button>

Plantilla

@ViewChild('inputFile') myInputVariable: ElementRef;

reset() {
    this.myInputVariable.nativeElement.value = '';
}
El botón

No es necesario. Puede restablecerlo después del evento de cambio, es solo para demostración

 3
Author: Admir,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-28 19:29:37

Versión corta Émbolo : 

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 {


}

Y creo que el caso más común es no usar el botón, sino restablecer automáticamente. Angular Template statements support chaining expressions so 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 enlace interesante sobre por qué no hay recursión en el cambio de valor.

 1
Author: Oleg Mazko,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-06-20 07:43:41

Creo que es simple, use # variable

<input #variable type="file" placeholder="File Name" name="filename" (change)="onChange($event); variable.value='' ">
<button>Reset</button>

" variable.opción value= null " también disponible

 1
Author: Fawad Mukhtar,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-02-15 12:49:56

Normalmente restablezco mi entrada de archivo después de capturar los archivos seleccionados. No es necesario pulsar un botón, tienes todo lo necesario en el objeto $event que estás pasando a onChange: 

onChange(event) {
  // Get your files
  const files: FileList = event.target.files;

  // Clear the input
  event.srcElement.value = null;
}

Flujo de trabajo diferente, pero el OP no menciona que presionar un botón es un requisito...

 0
Author: 2Toad,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-03-23 06:55:40