Angular 2で入力タグファイルタイプで選択したファイルをリセットするにはどうすればよいですか？

これは私の入力タグがどのように見えるかです：

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

選択したファイルをAngular2でリセットしたいのですが。助けていただければ幸いです。詳細が必要な場合はお知らせください。

PS

$eventパラメータからファイルの詳細を取得してtypescript変数に保存できましたが、この変数は入力タグにバインドされていません。

を使用ViewChildして、コンポーネントの入力にアクセスできます。まず、#someValueコンポーネントで読み取ることができるように、入力に追加する必要があります。

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

次に、あなたのコンポーネントにインポートする必要がありますViewChildから@angular/core。

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

次に、を使用ViewChildしてテンプレートからの入力にアクセスします。

@ViewChild('myInput')
myInputVariable: ElementRef;

これでmyInputVariable、選択したファイルをリセットするために使用できます。これ#myInputは、たとえば、ボタンのイベントでreset()呼び出されるcreateメソッドを使用した入力への参照であるためですclick。

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

最初console.logに選択したファイルを印刷し、2番目console.logにthis.myInputVariable.nativeElement.value = "";選択したファイルを入力から削除するため、空の配列を印刷します。this.myInputVariable.nativeElement.value = "";入力のFileList属性は読み取り専用であるため、を使用して入力の値をリセットする必要があります。そのため、配列からアイテムを削除するだけでは不可能です。これがPlunkerの動作です。

Angular 5

html

<input type="file" #inputFile>

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

テンプレート

@ViewChild('inputFile') myInputVariable: ElementRef;

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

ボタンは必要ありません。変更イベント後にリセットできます。デモ用です。

これを実現する1つの方法は、入力を<form>タグでラップしてリセットすることです。

私はにTHRフォームを取り付ける考えていないんだNgFormか、FormControlのいずれか。

@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

私は通常、選択したファイルをキャプチャした後にファイル入力をリセットします。ボタンをプッシュする必要はありません、あなたはに必要なすべて持っている$eventあなたはしているがに渡すことをオブジェクトにonChange：

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

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

ワークフローは異なりますが、OPはボタンを押すことが要件であるとは述べていません...

ショートバージョンプランカー：

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 {


}

そして、私はより一般的なケースはボタンを使用しないが自動的にリセットすることだと思います。Angular Templateステートメントは式の連鎖をサポートしているため、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 );
  }

}

そして、値の変更に再帰がない理由についての興味深いリンク。

シンプルだと思います。＃variableを使用してください

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

「variable.value = null」オプションも利用可能

私の場合、私は以下のようにそれをしました：

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

component.tsでViewChildを作成するのではなく、HTMLで#fileInputを使用してリセットしています。[ファイルのアップロード]ボタンがクリックされるたびに、最初に#fileInputがリセットされ、次に#fileInput.click()関数がトリガーされます。リセットする必要がある別のボタンがある場合は、クリック時#fileInput.value=''に実行できます。

テンプレート：

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

成分：

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

ng2-file-uploadで問題が発生している場合は、

HTML：

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

成分

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

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

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

この入力タグをフォームタグに追加しました。

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

私は角度のあるタイプスクリプトです。以下の行を追加し、ドキュメントフォームでフォームIDを取得し、その値を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'] = "";
              }
      }
    }

コンソールでdocument.formsを印刷すると、アイデアを得ることができます。

テンプレート参照変数を使用してメソッドに送信できます

html

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

成分

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

私は非常に単純なアプローチを使用しています。ファイルがアップロードされた後、* ngIfを使用して入力コントロールをすぐに削除します。これにより、入力フィールドがDOMから削除されて再度追加され、結果として新しいコントロールになるため、次のようになります。

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