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

Question

Voici à quoi ressemble ma balise d'entrée :

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

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

P.S.

J'ai pu obtenir les détails du fichier à partir de $event et l'enregistre dans une variable typographique, mais cette variable n'est pas liée à la balise d'entrée.

Answer 1

Vous pouvez utiliser ViewChild pour accéder à l'entrée dans votre composant. Tout d'abord, vous devez ajouter #someValue à votre entrée pour que vous puissiez 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 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é parce que c'est une référence à l'entrée avec #myInput par exemple, créer une méthode reset() qui sera appelé sur click de votre bouton :

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

Premier console.log imprimera le fichier que vous avez sélectionné, le second console.log imprimera un tableau vide car this.myInputVariable.nativeElement.value = ""; supprime le(s) fichier(s) sélectionné(s) de l'entrée. Nous devons utiliser this.myInputVariable.nativeElement.value = ""; pour réinitialiser la valeur de l'entrée parce que l'entrée FileList L'attribut est en lecture seule Il est donc impossible de supprimer un élément du tableau. Voici le travail Plunker .

Answer 2

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 nécessaire. Vous pouvez le réinitialiser après un événement de changement, c'est juste pour la démonstration.

Answer 3

Une façon d'y parvenir est d'envelopper votre entrée dans un fichier <form> et le réinitialiser.

Je n'envisage pas d'attacher le formulaire à NgForm o FormControl soit.

@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

Answer 4

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 le bouton mais de faire la réinitialisation automatiquement. Angular Modèles de déclarations permettent d'enchaîner les expressions de manière à 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 );
  }

}

Y lien intéressant sur la raison pour laquelle il n'y a pas de récurrence sur le changement de valeur.

Answer 5

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