web-dev-qa-db-fra.com

Angular 2 (changement) pour le téléchargement de fichiers

J'utilise le Angular 2 (changement) pour détecter le fichier téléchargé et déclencher la fonction. Mais je suis confronté au problème lorsque j'ai essayé de télécharger à nouveau le même fichier, car il n'y a pas de changement dans le fichier, (modification) n'est pas déclenché. Veuillez suggérer la liaison d'événement dans ce cas.

<input type="file" name="file" id="fileupload" (change)="onChange($event)"/>

Existe-t-il un moyen de réinitialiser la valeur d'entrée du fichier type à vide.

htmlangularangular2-template
13
Kiran Kumar

Vous pouvez accéder à l'entrée de fichier en tant que ViewChild et en obtenir les fichiers.

import { Component, ViewChild, ElementRef} '@angular/core';
@Component({
//...
template: `
  <input #fileInput type='file' (change)="fileChanged($event)">
`
//...
})
export class FileInputComponent {
  @ViewChild('fileInput') myFileInput: ElementRef;

  getFileLater() {
    console.log(this.myFileInput.nativeElement.files[0]);
  }

  fileChanged(event) {
    console.log(event.target.files[0]);
  }
}

.files[] Sur le nativeElement est toujours un tableau même s'il n'y a qu'un seul fichier sélectionné (ou aucun, d'ailleurs). Il vous donnera des objets fichier exactement comme si vous accédiez à event.target.files À partir de l'événement (change) Afin que vous puissiez en faire ce que vous voulez après coup.

Il convient de mentionner cependant que lorsqu'un fichier est choisi sur l'entrée de fichier et que l'événement de changement est déclenché, le fichier n'a en fait été "téléchargé" nulle part. Il lui transmet simplement une référence (avec d'autres métadonnées) avec laquelle le client peut travailler. En fait, le téléchargement des fichiers est quelque chose que vous devez programmer séparément.

MISE À JOUR:

Afin de forcer l'entrée de fichier à déclencher l'événement de modification même lorsque vous choisissez un fichier qui a été précédemment sélectionné, l'entrée de fichier doit être réinitialisée en effaçant sa valeur chaque fois que le bouton Parcourir est cliqué. Puisque vous utilisez déjà jQuery, vous pouvez le faire comme ceci: $('#fileupload').val("");.

Voir mon Plunker fourch pour un exemple de travail.

20
ABabin