Come ripristinare il file selezionato con il tipo di file del tag di input in Angular 2?

Ecco come appare il mio tag di input:

<input type="file" placeholder="File Name" name="filename" (change)="onChange($event)">
<button>Reset</button>

Voglio ripristinare il file selezionato in Angular 2. L'aiuto sarebbe molto apprezzato. Fammi sapere se hai bisogno di più dettagli.

PS

Potrei ottenere i dettagli del file dai $eventparametri e salvarlo in una variabile dattiloscritta, ma questa variabile non è vincolata al tag di input.

È possibile utilizzare ViewChildper accedere all'ingresso nel componente. Innanzitutto, devi aggiungere #someValueal tuo input in modo da poterlo leggere nel componente:

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

Quindi nel tuo componente devi importare ViewChildda @angular/core:

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

Quindi si utilizza ViewChildper accedere all'input dal modello:

@ViewChild('myInput')
myInputVariable: ElementRef;

Ora puoi myInputVariablereimpostare il file selezionato perché è un riferimento all'input con #myInput, ad esempio crea il metodo reset()che verrà chiamato clickall'evento del tuo pulsante:

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

Il primo console.logstamperà il file selezionato, il secondo console.logstamperà un array vuoto perché this.myInputVariable.nativeElement.value = "";elimina i file selezionati dall'input. Dobbiamo utilizzare this.myInputVariable.nativeElement.value = "";per ripristinare il valore dell'input perché l' FileListattributo di input è di sola lettura , quindi è impossibile rimuovere semplicemente l'elemento dall'array. Ecco Plunker al lavoro .

Angolare 5

html

<input type="file" #inputFile>

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

modello

@ViewChild('inputFile') myInputVariable: ElementRef;

reset() {
    this.myInputVariable.nativeElement.value = '';
}

Il pulsante non è richiesto. Puoi ripristinarlo dopo l'evento di modifica, è solo per dimostrazione

Un modo per ottenerlo è racchiudere il tuo input in un <form>tag e ripristinarlo.

Non sto pensando di allegare il modulo a NgFormo FormControlneanche.

@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

In genere reimposto il mio input di file dopo aver catturato i file selezionati. Non c'è bisogno di premere un pulsante, hai tutto il necessario $eventnell'oggetto a cui stai passando onChange:

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

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

Flusso di lavoro diverso, ma l'OP non menziona che premere un pulsante è un requisito ...

Versione corta Plunker :

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 {


}

E penso che il caso più comune sia quello di non usare il pulsante ma di ripristinare automaticamente. Le istruzioni del modello angolare supportano il concatenamento di espressioni in modo che 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 );
  }

}

E un collegamento interessante sul motivo per cui non c'è ricorsione sul cambiamento di valore.

Penso che sia semplice, usa #variable

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

Disponibile anche l'opzione "variable.value = null"

Nel mio caso l'ho fatto come di seguito:

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

Lo sto resettando usando #fileInput in HTML invece di creare un ViewChild in component.ts. Ogni volta che si fa clic sul pulsante "Carica file", prima reimposta #fileInput e quindi attiva la #fileInput.click()funzione. Se è necessario un pulsante separato per il ripristino, è #fileInput.value=''possibile eseguire il clic .

modello:

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

componente:

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

Se stai riscontrando problemi 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 = '';
   };

Ho aggiunto questo tag di input nel tag del modulo ..

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

Ho un dattiloscritto angolare, ho aggiunto le righe sottostanti, ottieni l'ID del tuo modulo nei moduli del documento e rendi quel valore nullo.

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

Stampa document.forms nella console e puoi farti un'idea ..

puoi utilizzare la variabile di riferimento del modello e inviarla a un metodo

html

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

componente

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

Sto usando un approccio molto semplice. Dopo che un file è stato caricato, rimuovo brevemente il controllo di input, utilizzando * ngIf. Ciò farà sì che il campo di input venga rimosso dal dom e aggiunto di nuovo, di conseguenza è un nuovo controllo, e quindi è emply:

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