Jak zresetować wybrany plik z typem pliku znacznika wejściowego w Angular 2?

Tak wygląda mój tag wejściowy:

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

Chcę zresetować wybrany plik w Angular 2. Byłbym bardzo wdzięczny za pomoc. Daj mi znać, jeśli potrzebujesz więcej informacji.

PS

Mogłem uzyskać szczegółowe informacje o pliku z $eventparametrów i zapisać go w zmiennej maszynopisu, ale ta zmienna nie jest powiązana ze znacznikiem wejściowym.

Możesz użyć, ViewChildaby uzyskać dostęp do wejścia w swoim komponencie. Najpierw musisz dodać #someValuedane wejściowe, aby można było je przeczytać w komponencie:

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

Następnie w swoim komponencie musisz importować ViewChildz @angular/core:

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

Następnie użyj, ViewChildaby uzyskać dostęp do danych wejściowych z szablonu:

@ViewChild('myInput')
myInputVariable: ElementRef;

Teraz możesz użyć myInputVariabledo zresetowania wybranego pliku, ponieważ jest to odniesienie do wejścia za pomocą #myInput, na przykład metody create, reset()która zostanie wywołana przy clickzdarzeniu twojego przycisku:

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

Najpierw console.logwydrukuje wybrany plik, po drugie console.logwydrukuje pustą tablicę, ponieważ this.myInputVariable.nativeElement.value = "";usuwa wybrane pliki z wejścia. Musimy użyć, this.myInputVariable.nativeElement.value = "";aby zresetować wartość wejścia, ponieważ FileListatrybut input jest tylko do odczytu , więc nie można po prostu usunąć elementu z tablicy. Oto pracujący Plunker .

Kątowy 5

html

<input type="file" #inputFile>

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

szablon

@ViewChild('inputFile') myInputVariable: ElementRef;

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

Przycisk nie jest wymagany. Możesz go zresetować po zmianie zdarzenia, służy to tylko do demonstracji

Jednym ze sposobów na osiągnięcie tego jest zawinięcie wprowadzonych danych <form>tagiem i zresetowanie go.

Nie rozważam dołączania formularza do NgFormlub FormControlteż.

@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

Po przechwyceniu wybranych plików zazwyczaj resetuję dane wejściowe. Nie musisz wciskać przycisku, masz wszystko, czego potrzebujesz w $eventobiekcie, do którego przechodzisz onChange:

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

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

Inny przepływ pracy, ale OP nie wspomina, że ​​naciśnięcie przycisku jest wymogiem ...

Krótka wersja 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 {


}

Myślę, że bardziej powszechnym przypadkiem jest nie używanie przycisku, ale resetowanie automatyczne. Instrukcje Angular Template obsługują wyrażenia łańcuchowe, więc 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 );
  }

}

I interesujący link o tym, dlaczego nie ma rekursji przy zmianie wartości.

Myślę, że to proste, użyj #variable

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

Dostępna jest również opcja „zmienna.wartość = null”

W moim przypadku zrobiłem to jak poniżej:

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

Resetuję go za pomocą #fileInput w HTML, zamiast tworzyć ViewChild w component.ts. Za każdym razem, gdy zostanie kliknięty przycisk „Prześlij plik”, najpierw resetuje on #fileInput, a następnie uruchamia #fileInput.click()funkcję. Jeśli do zresetowania potrzebny jest osobny przycisk, #fileInput.value=''można wykonać kliknięcie .

szablon:

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

składnik:

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

Jeśli masz problem z przesyłaniem plików ng2,

HTML:

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

składnik

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

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

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

Dodałem ten tag wejściowy do tagu formularza.

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

W maszynopisie kątowym dodałem poniższe wiersze, pobieram identyfikator formularza w formularzach dokumentów i ustawiam tę wartość na zero.

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

Wydrukuj document.forms w konsoli i możesz uzyskać pomysł.

możesz użyć zmiennej referencyjnej szablonu i wysłać do metody

html

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

składnik

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

Używam bardzo prostego podejścia. Po przesłaniu pliku wkrótce usuwam kontrolkę wejściową, używając * ngIf. Spowoduje to usunięcie pola wejściowego z domeny i ponowne dodanie, w konsekwencji jest to nowa kontrolka, a zatem jest ona:

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