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 $event
parâmetros e salvá-los em uma variável de texto digitado, mas essa variável não está vinculada à tag de entrada.
Respostas:
Você pode usar
ViewChild
para 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
ViewChild
de@angular/core
:import { ViewChild } from '@angular/core';
Em seguida, você usa
ViewChild
para acessar a entrada do modelo:@ViewChild('myInput') myInputVariable: ElementRef;
Agora você pode usar
myInputVariable
para redefinir o arquivo selecionado porque é uma referência de entrada com#myInput
, por exemplo, o método de criaçãoreset()
que será chamado noclick
evento do seu botão:reset() { console.log(this.myInputVariable.nativeElement.files); this.myInputVariable.nativeElement.value = ""; console.log(this.myInputVariable.nativeElement.files); }
Primeiro
console.log
imprimirá o arquivo que você selecionou, depoisconsole.log
imprimirá uma matriz vazia porquethis.myInputVariable.nativeElement.value = "";
exclui os arquivos selecionados da entrada. Temos que usarthis.myInputVariable.nativeElement.value = "";
para redefinir o valor da entrada porque oFileList
atributo de entrada é somente leitura , então é impossível apenas remover o item do array. Aqui está o Plunker trabalhando .fonte
this.myInputVariable.nativeElement.value = "";
? /myInputVariable
é realmente do tipoElementRef
Angular 5
html
modelo
O botão não é obrigatório. Você pode redefini-lo após o evento de mudança, é apenas para demonstração
fonte
Uma maneira de fazer isso é envolver sua entrada na
<form>
tag e redefini-la.Eu não estou considerando anexando thr formulário para
NgForm
ouFormControl
quer.https://plnkr.co/edit/Ulqh2l093LV6GlQWKkUA?p=preview
fonte
.reset()
método em viewChild ??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
$event
que é necessário no objeto para o qual está passandoonChange
:Fluxo de trabalho diferente, mas o OP não menciona que apertar um botão é um requisito ...
fonte
Versão curta do Plunker :
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 :
E um link interessante sobre por que não há recursão na mudança de valor.
fonte
Acho que é simples, use #variable
opção "variable.value = null" também disponível
fonte
No meu caso, fiz como a seguir:
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.fonte
modelo:
componente:
fonte
Se você está enfrentando problemas com ng2-file-upload,
HTML:
componente
fonte
Eu adicionei esta tag de entrada na tag de formulário.
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.
Imprima document.forms no console e você pode ter uma ideia ..
fonte
você pode usar a variável de referência de modelo e enviar para um método
html
componente
fonte
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">
fonte
<input type="file" id="image_control" (change)="validateFile($event)" accept="image/gif, image/jpeg, image/png" />
fonte