Comment gérer l'upload d'un fichier sur Angular ?

L'upload de fichiers est au départ une fonctionnalité qui nécessitait la soumission d'un formulaire en HTML vers un serveur qui le récupérait. Grâce aux améliorations du langage JavaScript, la partie "soumission du formulaire au serveur" n'est plus obligatoire et on peut le faire de façon dynamique. Avec le framework Angular, il suffit de quelques lignes de code réparties sur 3 fichiers pour envoyer un formulaire vers le site web ou l'API de son choix.

L'exemple suivant fonctionne avec le framework Angular en version 5. Le premier fichier, "upload-fichier.component.html" contient le code HTML qui va afficher le champ d'ajout de fichier. Par rapport au HTML classique, le seul changement est l'ajout d'une fonction sur l'évènement "(change)" de l'input. La fonction va prendre en paramètre le fichier sélectionné. On récupère l'input modifié car il s'agit de la cible de l'évènement ("event.target") et l'attribut "files" contient le fichier uploadé (ou les fichiers en cas de multiupload).

<div class="form-group">
    <label for="fichier">Choisir un fichier</label>
    <input type="fichier" id="fichier" (change)="envoiFichier($event.target.files)"/>
</div>

Le deuxième fichier se nomme "upload-fichier.component.ts". Il contient le code TypeScript qui va récupérer le fichier uploadé et appeler le service pour envoyer le fichier.

//Variable contenant le fichier à envoyer (elle doit avoir une valeur par défaut)
fichierAEnvoyer: File = null;
//Fonction qui récupère le fichier pour l'ajouter à la variable
//Elle est appelée lors d'un changement sur l'input du fichier
//S'il y a plusieurs fichiers, il faudra adapter le code avec une variable de type "FileList" et parcourir la liste de fichiers avec une boucle.
envoiFichier (fichiers: FileList) {
    this.fichierAEnvoyer = fichiers.item(0);
}
//Fonction qui va lier l'attribut au service qui envoie le fichier au site ou à l'API. On utilise pour cela le système de souscription issue de la programmation réactive
envoiFichierParLeService() {
    this.envoiFichierService.postFile(this.fichierAEnvoyer).subscribe(resultat => {
      // Code à développer ici en cas de succès de l'envoi du fichier
      }, erreur => {
        console.log("Erreur lors de l'envoi du fichier : ", erreur);
      });
}

Le dernier fichier est le service d'envoi de fichiers. Pour pouvoir envoyer le fichier au site de son choix, il faut faire appel au module "HttpClient" avec la méthode "POST". Le fichier sera stocké dans un objet de la classe "FormData". C'est cette classe qui permet en JavaScript de soumettre dynamiquement des formulaires sans devoir changer de page.

envoiFichier(fichierAEnvoyer: File): Observable<boolean> {
    const url = 'URL du site vers lequel envoyer le fichier';
    const formData: FormData = new FormData();
    formData.append('fichier', fichierAEnvoyer, fichierAEnvoyer.name);
    return this.httpClient
      .post(url, formData, { headers: vosEntetesDeConfiguration })
      .map(() => { return true; })
      .catch((e) => this.handleError(e));
}