Bagaimana cara mereset file yang dipilih dengan tipe file tag input di Angular 2?

Seperti inilah tampilan tag input saya:

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

Saya ingin mengatur ulang file yang dipilih di Angular 2. Bantuan akan sangat kami hargai. Beri tahu saya jika Anda membutuhkan detail lebih lanjut.

PS

Saya bisa mendapatkan detail file dari $eventparameter dan menyimpannya dalam variabel skrip, tetapi variabel ini tidak terikat ke tag input.

Anda dapat menggunakan ViewChilduntuk mengakses input di komponen Anda. Pertama, Anda perlu menambahkan #someValuemasukan Anda sehingga Anda dapat membacanya di komponen:

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

Kemudian di komponen Anda, Anda perlu mengimpor ViewChilddari @angular/core:

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

Kemudian Anda gunakan ViewChilduntuk mengakses input dari template:

@ViewChild('myInput')
myInputVariable: ElementRef;

Sekarang Anda dapat menggunakan myInputVariableuntuk mengatur ulang file yang dipilih karena ini adalah referensi untuk dimasukkan #myInput, misalnya membuat metode reset()yang akan dipanggil pada saat clicktombol Anda:

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

Pertama console.logakan mencetak file yang Anda pilih, kedua console.logakan mencetak array kosong karena this.myInputVariable.nativeElement.value = "";menghapus file yang dipilih dari input. Kita harus menggunakan this.myInputVariable.nativeElement.value = "";untuk mereset nilai input karena FileListatribut input hanya bisa dibaca , jadi tidak mungkin untuk menghapus item dari array. Ini Plunker yang berfungsi .

Sudut 5

html

<input type="file" #inputFile>

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

template

@ViewChild('inputFile') myInputVariable: ElementRef;

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

Tombol tidak diperlukan. Anda dapat mengatur ulang setelah acara perubahan, itu hanya untuk demonstrasi

Salah satu cara untuk mencapainya adalah dengan memasukkan masukan Anda <form> tag dan mengatur ulangnya.

Saya tidak mempertimbangkan untuk melampirkan formulir NgFormatau FormControlkeduanya.

@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

Saya biasanya mengatur ulang input file saya setelah mengambil file yang dipilih. Tidak perlu menekan tombol, Anda memiliki semua yang diperlukan di $eventobjek yang Anda teruskan onChange:

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

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

Alur kerja berbeda, tetapi OP tidak menyebutkan menekan tombol adalah persyaratan ...

Versi pendek 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 {


}

Dan saya pikir kasus yang lebih umum adalah tidak menggunakan tombol tetapi melakukan reset secara otomatis. Pernyataan Template Angular mendukung ekspresi rantai sehingga 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 );
  }

}

Dan tautan menarik tentang mengapa tidak ada rekursi pada perubahan nilai.

Saya pikir itu sederhana, gunakan #variable

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

Opsi "variable.value = null" juga tersedia

Dalam kasus saya, saya melakukannya seperti di bawah ini:

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

Saya menyetel ulang menggunakan #fileInput di HTML daripada membuat ViewChild di component.ts. Setiap kali tombol "Unggah File" diklik, pertama-tama tombol akan menyetel ulang #fileInput lalu memicu #fileInput.click()fungsi. Jika ada tombol terpisah yang diperlukan untuk mengatur ulang maka di klik #fileInput.value=''dapat dijalankan.

template:

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

komponen:

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

Jika Anda menghadapi masalah dengan ng2-file-upload,

HTML:

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

komponen

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

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

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

Saya telah menambahkan tag masukan ini ke dalam tag formulir ..

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

Saya tipe skrip sudut, saya telah menambahkan baris di bawah ini, dapatkan id formulir Anda dalam bentuk dokumen dan jadikan nilai itu sebagai 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'] = "";
              }
      }
    }

Cetak document.forms di konsol dan Anda bisa mendapatkan ide ..

Anda dapat menggunakan variabel referensi template dan mengirim ke suatu metode

html

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

komponen

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

Saya menggunakan pendekatan yang sangat sederhana. Setelah file diunggah, saya segera menghapus kontrol input, menggunakan * ngIf. Itu akan menyebabkan field input dihapus dari dom dan ditambahkan kembali, akibatnya itu adalah kontrol baru, dan oleh karena itu kosong:

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