¿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. Se agradecería mucho la ayuda. Déjeme saber si usted necesita más detalles.

PD

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

Puede utilizar ViewChildpara acceder a la entrada en su componente. Primero, debe agregar #someValuea 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 ViewChilddesde @angular/core:

import { ViewChild } from '@angular/core';

Luego usa ViewChildpara acceder a la entrada de la plantilla:

@ViewChild('myInput')
myInputVariable: ElementRef;

Ahora puede usar myInputVariablepara restablecer el archivo seleccionado porque es una referencia para ingresar #myInput, por ejemplo, crear un método reset()que se llamará en el clickevento de su botón:

reset() {
    console.log(this.myInputVariable.nativeElement.files);
    this.myInputVariable.nativeElement.value = "";
    console.log(this.myInputVariable.nativeElement.files);
}

Primero console.logimprimirá el archivo que seleccionó, segundo console.logimprimirá 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 FileListatributo de la entrada es de solo lectura , por lo que es imposible eliminar el elemento de la matriz. Aquí está trabajando Plunker .

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

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

No estoy considerando adjuntar el formulario thr a NgFormni FormControltampoco.

@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

Por lo general, 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$event objeto al que está pasando 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 ...

Plunker versión corta :

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, pero se reinicia automáticamente. Las declaraciones de plantilla angular admiten el encadenamiento de expresiones, por lo que 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 un enlace interesante sobre por qué no hay recursividad en el cambio de valor.

Creo que es simple, usa #variable

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

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

En mi caso lo hice de la siguiente manera:

 <input #fileInput hidden (change)="uploadFile($event.target.files)" type="file" />
 <button mat-button color="warn" (click)="fileInput.value=''; fileInput.click()"> Upload File</button>

Lo estoy restableciendo usando #fileInput en HTML en lugar de crear un ViewChild en component.ts. Siempre que se hace clic en el botón "Cargar archivo", primero restablece #fileInput y luego activa la #fileInput.click()función. Si es necesario restablecer cualquier botón separado, #fileInput.value=''se puede ejecutar al hacer clic .

modelo:

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

componente:

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

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

He agregado esta etiqueta de entrada en la etiqueta del formulario.

 <form id="form_data">
  <input  type="file" id="file_data"  name="browse"
  (change)="handleFileInput($event, dataFile, f)"  />
</form>

I mecanografiado angular, he agregado las siguientes líneas, obtengo su ID 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 podrá hacerse una idea.

puede usar la variable de referencia de la plantilla y enviarla a un método

html

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

componente

onChange(event: any, element): void {
    // codes
    element.value = '';
  }

Estoy usando un enfoque muy simple. Después de que se haya cargado un archivo, en breve elimino el control de entrada, usando * ngIf. Eso hará que el campo de entrada se elimine del dom y se vuelva a agregar, en consecuencia, es un nuevo control y, por lo tanto, está vacío:

showUploader: boolean = true;

async upload($event) {
  await dosomethingwiththefile();
  this.showUploader = false;
  setTimeout(() =>{ this.showUploader = true }, 100);
}

<input type="file" (change)="upload($event)" *ngIf="showUploader">

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