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

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. Une aide serait grandement appréciée. Faites-moi savoir si vous avez besoin de plus de détails.

PS

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

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

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

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

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

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

@ViewChild('myInput')
myInputVariable: ElementRef;

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

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

Le premier console.logimprimera le fichier que vous avez sélectionné, le second console.logimprimera 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' FileListattribut d'entrée est en lecture seule , il est donc impossible de simplement supprimer l'élément du tableau. Voilà Plunker qui travaille .

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 un événement de changement, c'est juste pour la démonstration

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

Je n'envisage pas de joindre un formulaire à l'un NgFormou à l' FormControlautre.

@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

Je réinitialise généralement mon entrée de fichier après avoir capturé les fichiers sélectionnés. Pas besoin d'appuyer sur un bouton, vous avez tout ce qui est nécessaire dans l' $eventobjet 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 l'OP ne mentionne pas que le fait d'appuyer sur un bouton est une exigence ...

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 le réinitialiser automatiquement. Les instructions de modèle angulaire prennent en charge les expressions de chaînage afin que 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 un lien intéressant expliquant pourquoi il n'y a pas de récursivité sur le changement de valeur.

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

Dans mon cas, je l'ai fait comme ci-dessous:

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

Je le réinitialise en utilisant #fileInput en HTML plutôt que de créer un ViewChild dans component.ts. Chaque fois que vous cliquez sur le bouton "Télécharger le fichier", il réinitialise d'abord #fileInput, puis déclenche la #fileInput.click()fonction. Si un bouton séparé doit être réinitialisé, un clic #fileInput.value=''peut être exécuté.

modèle:

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

composant:

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

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

J'ai ajouté 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>

J'ai tapoté angulaire, j'ai ajouté des lignes ci-dessous, obtenez votre identifiant de formulaire dans les formulaires de document et rendez 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 faire une idée.

vous pouvez utiliser une variable de référence de modèle et l'envoyer à une méthode

html

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

composant

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

J'utilise une approche très simple. Après le téléchargement d'un fichier, je supprime brièvement le contrôle d'entrée, en utilisant * ngIf. Cela entraînera la suppression du champ d'entrée du dom et l'ajout de nouveau, par conséquent, il s'agit d'un nouveau contrôle, et par conséquent, il est utilisé:

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