web-dev-qa-db-fra.com

Comment réinitialiser le fichier sélectionné avec le type de fichier de balise d'entrée dans Angular 2?

Voici à quoi ressemble mon tag d’entrée:

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

Je souhaite réinitialiser le fichier sélectionné dans Angular 2. Une aide serait grandement appréciée. Faites-moi savoir si vous avez besoin de plus de détails.

P.S.

Je pourrais obtenir les détails du fichier à partir des paramètres $event et l'enregistrer dans une variable TypeScript, mais cette variable n'est pas liée à la balise input.

angular
49
akash

Vous pouvez utiliser ViewChild pour accéder aux entrées de votre composant. Tout d'abord, vous devez ajouter #someValue à votre entrée afin de pouvoir le lire dans le composant:

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

Ensuite, dans votre composant, vous devez importer ViewChild à partir de @angular/core:

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

Ensuite, vous utilisez ViewChild pour accéder à l'entrée du modèle:

@ViewChild('myInput')
myInputVariable: ElementRef;

Vous pouvez maintenant utiliser myInputVariable pour réinitialiser le fichier sélectionné car il s'agit d'une référence à saisir avec #myInput, par exemple, la méthode create reset() qui sera appelée le même événement click de votre bouton:

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

Le premier console.log imprime le fichier que vous avez sélectionné, le second console.log imprime un tableau vide car this.myInputVariable.nativeElement.value = ""; supprime le ou les fichiers sélectionnés de l'entrée. Nous devons utiliser this.myInputVariable.nativeElement.value = ""; pour réinitialiser la valeur de l'entrée car l'attribut FileList de l'entrée est readonly, il est donc impossible de simplement supprimer un élément du tableau. Voici de travail Plunker .

117
Stefan Svrkota

Une façon d'y parvenir consiste à envelopper votre entrée dans la balise <form> et à la réinitialiser.

Je n'envisage pas non plus d'attacher la forme à NgForm ou 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

11
Edmar Miyake

angulaire 5

html 

<input type="file" #inputFile>

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

modèle 

@ViewChild('inputFile') myInputVariable: ElementRef;

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

Le bouton n'est pas requis. Vous pouvez le réinitialiser après l'événement de changement, c'est juste pour la démonstration 

6
Admir

Version courte 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 {


}

Et je pense que le cas le plus courant est de ne pas utiliser de bouton mais de réinitialiser automatiquement. Angular Les énoncés de modèle prennent en charge les expressions de chaîne afin/ 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 );
  }

}

Et lien intéressant sur la raison pour laquelle il n’ya pas de récursion sur le changement de valeur.

2
Oleg Mazko

Je pense que c'est simple, utilisez #variable

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

Option "variable.value = null" également disponible

2
Fawad Mukhtar

Je réinitialise généralement mon fichier après avoir capturé les fichiers sélectionnés. Inutile d'appuyer sur un bouton, vous avez tout ce dont vous avez besoin dans l'objet $event que vous passez à onChange:

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

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

Flux de travail différent, mais le PO ne mentionne pas qu'il est nécessaire d'appuyer sur un bouton ...

1
2Toad
<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;
    }
  }
0
Mayur Sakariya

J'ai ajouter cette balise d'entrée dans la balise de formulaire.

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

I angular TypeScript, j'ai ajouté les lignes ci-dessous, obtenez votre identifiant de formulaire dans les formulaires de document et rend cette valeur nulle.

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

Imprimez document.forms dans la console et vous pourrez vous en faire une idée.

0
Deepa

Si vous rencontrez un problème avec ng2-file-upload,

HTML:

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

composant

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

@ViewChild(' activeFrameinputFile ') InputFrameVariable : ElementRef;

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

0
Anil Kumar Dyavanapalli

modèle: 

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

composant:

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