Wie setze ich die ausgewählte Datei mit dem Dateityp des Eingabe-Tags in Angular 2 zurück?

So sieht mein Eingabe-Tag aus:

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

Ich möchte die ausgewählte Datei in Angular 2 zurücksetzen. Hilfe wäre sehr dankbar. Lassen Sie mich wissen, wenn Sie weitere Details benötigen.

PS

Ich könnte Dateidetails von $eventParametern abrufen und in einer Typoskriptvariablen speichern, aber diese Variable ist nicht an das Eingabe-Tag gebunden.

Sie können ViewChilddamit auf die Eingabe in Ihrer Komponente zugreifen. Zuerst müssen Sie #someValueIhre Eingabe ergänzen , damit Sie sie in der Komponente lesen können:

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

Dann müssen Sie in Ihrer Komponente importieren ViewChildaus @angular/core:

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

Anschließend können Sie ViewChildauf die Eingabe aus der Vorlage zugreifen:

@ViewChild('myInput')
myInputVariable: ElementRef;

Jetzt können Sie myInputVariabledie ausgewählte Datei zurücksetzen, da es sich um eine Referenz für die Eingabe handelt #myInput, z. B. um eine Erstellungsmethode reset(), die beim clickEreignis Ihrer Schaltfläche aufgerufen wird :

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

Erstens console.logwird die ausgewählte Datei console.loggedruckt , zweitens wird ein leeres Array gedruckt, da this.myInputVariable.nativeElement.value = "";ausgewählte Datei (en) aus der Eingabe gelöscht werden. Wir müssen verwenden this.myInputVariable.nativeElement.value = "";, um den Wert der Eingabe zurückzusetzen, da das FileListAttribut der Eingabe schreibgeschützt ist , sodass es unmöglich ist, nur ein Element aus dem Array zu entfernen. Hier arbeitet Plunker .

Winkel 5

html

<input type="file" #inputFile>

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

Vorlage

@ViewChild('inputFile') myInputVariable: ElementRef;

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

Taste ist nicht erforderlich. Sie können es nach dem Änderungsereignis zurücksetzen, es dient nur zur Demonstration

Eine Möglichkeit, dies zu erreichen, besteht darin, Ihre Eingabe in ein <form>Tag zu verpacken und zurückzusetzen.

Ich denke nicht darüber nach, die Form an NgFormoder FormControlanzubringen.

@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

Normalerweise setze ich meine Dateieingabe zurück, nachdem ich die ausgewählten Dateien erfasst habe. Sie müssen keinen Knopf drücken, Sie haben alles, was für das $eventObjekt erforderlich ist, an das Sie übergeben onChange:

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

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

Unterschiedlicher Workflow, aber das OP erwähnt nicht, dass das Drücken einer Taste eine Voraussetzung ist ...

Kurzversion 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 {


}

Und ich denke, häufiger ist es, keine Taste zu verwenden, sondern automatisch zurückzusetzen. Angular Template-Anweisungen unterstützen Verkettungsausdrücke, sodass 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 );
  }

}

Und interessanter Link darüber, warum es keine Rekursion zur Wertänderung gibt.

Ich denke, es ist einfach, verwenden Sie #variable

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

Option "variable.value = null" ebenfalls verfügbar

In meinem Fall habe ich es wie folgt gemacht:

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

Ich setze es mit #fileInput in HTML zurück, anstatt ein ViewChild in component.ts zu erstellen. Wenn auf die Schaltfläche "Datei hochladen" geklickt wird, wird zuerst der #fileInput zurückgesetzt und dann die #fileInput.click()Funktion ausgelöst . Wenn zum Zurücksetzen eine separate Schaltfläche erforderlich ist, #fileInput.value=''kann diese beim Klicken ausgeführt werden.

Vorlage:

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

Komponente:

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

Wenn Sie Probleme mit dem Hochladen von ng2-Dateien haben,

HTML:

<input type="file" name="myfile" ` **#activeFrameinputFile** `ng2FileSelect [uploader]="frameUploader" (change)="frameUploader.uploadAll()" />

Komponente

import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';

@ViewChild('`**activeFrameinputFile**`') `**InputFrameVariable**`: ElementRef;

this.frameUploader.onSuccessItem = (item, response, status, headers) => {
    this.`**InputFrameVariable**`.nativeElement.value = '';
   };

Ich habe dieses Eingabe-Tag zum Formular-Tag hinzugefügt.

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

Ich habe eckiges Typoskript, ich habe unten Zeilen hinzugefügt, bekomme deine Formular-ID in Dokumentformularen und mache diesen Wert als null.

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

Drucken Sie document.forms in der Konsole und Sie können sich ein Bild machen.

Sie können die Vorlagenreferenzvariable verwenden und an eine Methode senden

html

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

Komponente

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

Ich benutze einen sehr einfachen Ansatz. Nachdem eine Datei hochgeladen wurde, entferne ich kurz das Eingabesteuerelement mit * ngIf. Dies führt dazu, dass das Eingabefeld aus dem Dom entfernt und erneut hinzugefügt wird. Infolgedessen handelt es sich um ein neues Steuerelement, und daher ist es einfach:

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