Como redefinir o arquivo selecionado com o tipo de arquivo de tag de entrada no Angular 2?

Esta é a aparência da minha tag de entrada:

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

Desejo redefinir o arquivo selecionado no Angular 2. Agradecemos a ajuda. Deixe-me saber se você precisar de mais detalhes.

PS

Eu poderia obter detalhes do arquivo de $eventparâmetros e salvá-los em uma variável de texto digitado, mas essa variável não está vinculada à tag de entrada.

Você pode usar ViewChildpara acessar a entrada em seu componente. Primeiro, você precisa adicionar #someValueà sua entrada para que possa lê-la no componente:

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

Então, em seu componente, você precisa importar ViewChildde @angular/core:

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

Em seguida, você usa ViewChildpara acessar a entrada do modelo:

@ViewChild('myInput')
myInputVariable: ElementRef;

Agora você pode usar myInputVariablepara redefinir o arquivo selecionado porque é uma referência de entrada com #myInput, por exemplo, o método de criação reset()que será chamado no clickevento do seu botão:

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

Primeiro console.logimprimirá o arquivo que você selecionou, depois console.logimprimirá uma matriz vazia porque this.myInputVariable.nativeElement.value = "";exclui os arquivos selecionados da entrada. Temos que usar this.myInputVariable.nativeElement.value = "";para redefinir o valor da entrada porque o FileListatributo de entrada é somente leitura , então é impossível apenas remover o item do array. Aqui está o Plunker trabalhando .

Angular 5

html

<input type="file" #inputFile>

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

modelo

@ViewChild('inputFile') myInputVariable: ElementRef;

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

O botão não é obrigatório. Você pode redefini-lo após o evento de mudança, é apenas para demonstração

Uma maneira de fazer isso é envolver sua entrada na <form>tag e redefini-la.

Eu não estou considerando anexando thr formulário para NgFormou FormControlquer.

@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

Normalmente, redefino minha entrada de arquivo depois de capturar os arquivos selecionados. Não há necessidade de apertar um botão, você tem tudo o $eventque é necessário no objeto para o qual está passando onChange:

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

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

Fluxo de trabalho diferente, mas o OP não menciona que apertar um botão é um requisito ...

Versão curta do 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 eu acho que o caso mais comum é não usar o botão, mas redefinir automaticamente. As declarações Angular Template suportam expressões de encadeamento, então 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 um link interessante sobre por que não há recursão na mudança de valor.

Acho que é simples, use #variable

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

opção "variable.value = null" também disponível

No meu caso, fiz como a seguir:

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

Estou redefinindo-o usando #fileInput em HTML em vez de criar um ViewChild em component.ts. Sempre que o botão "Carregar arquivo" está sendo clicado, primeiro ele redefine o #fileInput e depois aciona a #fileInput.click()função. Se for necessário redefinir qualquer botão separado, então ao clicar #fileInput.value=''pode ser executado.

modelo:

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

componente:

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

Se você está enfrentando problemas com 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 = '';
   };

Eu adicionei esta tag de entrada na tag de formulário.

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

Com o texto datilografado angular, adicionei as linhas abaixo, pegue o id do formulário em formulários de documento e torne esse valor nulo.

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

Imprima document.forms no console e você pode ter uma ideia ..

você pode usar a variável de referência de modelo e enviar para um método

html

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

componente

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

Estou usando uma abordagem muito simples. Após o upload de um arquivo, eu removo rapidamente o controle de entrada, usando * ngIf. Isso fará com que o campo de entrada seja removido do dom e adicionado novamente, conseqüentemente é um novo controle e, portanto, é 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;
    }
  }