Angular 13 File Upload et FormData

Apprendre à télécharger des fichiers en utilisant Angular 13 et HTML FormData

Le téléchargement de fichiers et d’images est un problème courant dans le développement web et vous rencontrerez souvent un besoin d’implémenter le téléchargement de fichiers dans vos applications. Cela dépend du framework ou de la bibliothèque que vous avez choisi. Par exemple, Angular, React, ou Vue, vous aurez différentes techniques pour le téléchargement de fichiers, mais il y a des choses communes – puisque tous ces outils sont essentiellement des outils côté client qui sont construits au-dessus de JavaScript – comme l’utilisation de la structure FormData pour créer un formulaire en JavaScript ou TypeScript et envoyer des données en plusieurs parties à des serveurs

Alors que React et Vue.js n’ont pas leur propre client HTTP, Angular est livré avec un HttpClient intégré avec des fonctionnalités avancées telles que des rapports de progression et des intercepteurs

Fondamentalement, vous utiliserez Angular HttpClient avec FormData pour envoyer des requêtes au serveur afin de télécharger un ou plusieurs fichiers

Vous devez également utiliser divers artefacts tels que les services Angular pour encapsuler le code de téléchargement des fichiers et les composants Angular pour construire l’interface utilisateur de téléchargement des fichiers

Pour styliser l’interface utilisateur, vous avez une myriade d’options telles que Angular Material, Bootstrap, et Tailwind, etc, les premières options étant les plus populaires

Dans cet article, nous allons apprendre les concepts Angular utilisés pour le téléchargement de fichiers et d’images, y compris un tutoriel étape par étape sur la façon de mettre en œuvre le téléchargement de fichiers avec la dernière version d’Angular 13, et Bootstrap 4

Angular est une plateforme complète pour construire des applications JavaScript côté client, également appelées applications à page unique. Elle est en fait écrite en TypeScript par une équipe de développeurs de Google et comprend des bibliothèques intégrées pour les problèmes courants de développement web tels que l’envoi de requêtes HTTP et la gestion de la soumission et de la validation des formulaires

Comment fonctionne le téléchargement de fichiers et d’images dans Angular 13

Angular fournit de nombreux modules intégrés que vous pouvez utiliser pour effectuer des téléchargements de fichiers et d’images

Selon les exigences de votre cas d’utilisation, vous pouvez avoir besoin de modifier plus ou moins de code, mais en bref, ce sont les blocs de construction de toute fonctionnalité de téléchargement de fichiers dans vos applications

FormData : Encapsulation des données de fichiers

FormData est une API HTML5 qui est construite dans les navigateurs web modernes et qui n’est pas spécifique à Angular. Elle vous permet de créer des objets pour stocker des paires clé-valeur qui correspondent à un formulaire HTML. Elle peut être considérée comme la manière JavaScript de créer des formulaires pour envoyer des données, y compris des fichiers, à des serveurs API REST via HTTP

Vous pouvez créer un objet FormData à l’aide du code suivant

const formData = new FormData() 

Après avoir créé l’instance, vous pouvez ajouter des paires clé-valeur de données et de fichiers que vous devez envoyer ou télécharger vers le serveur qui expose un point d’extrémité de l’API REST

Module HttpClient : Téléchargement de fichiers/images avec des requêtes HTTP

HttpClientModule est un module intégré qui contient le service HttpClient permettant d’envoyer des requêtes HTTP et de recevoir des réponses de serveurs HTTP. Il est basé sur l’interface XMLHttpRequest disponible sur tous les navigateurs web. Il fournit des fonctionnalités supplémentaires telles que des intercepteurs et des requêtes et réponses typées

Tutoriel sur le téléchargement multiple de fichiers et d’images

Tout au long de ce tutoriel, nous allons apprendre à mettre en œuvre le téléchargement multiple de fichiers et d’images avec Angular 13 et les versions précédentes, y compris Angular 13, Angular 12 et Angular 10

Nous verrons étape par étape comment construire un exemple d’application Angular 13 avec des barres de progression générées avec Angular CLI, stylisées avec Bootstrap 4 pour le téléchargement de plusieurs fichiers ou images

Comme Angular est un framework JavaScript côté client, nous utiliserons FormData pour envoyer des données de fichiers ou d’images au serveur API

Mise en œuvre du téléchargement de fichiers multiples avec Angular 13 et FormData

Dans ce tutoriel, vous allez créer une application Angular 13 qui vous permet de télécharger plusieurs fichiers/images vers un serveur de fichiers. L’application affichera une barre de progression pour chacun des fichiers téléchargés sur le serveur

Outils et bibliothèques

Nous utiliserons les outils suivants pour construire notre démo de téléchargement de fichiers

• Angular CLI 13
• Bootstrap 4

Point d’arrivée du serveur API REST pour le téléchargement de fichiers

Dans cette partie, nous ne construirons pas l’application serveur pour le téléchargement de fichiers car cela dépasse le cadre d’Angular. Vous pouvez utiliser n’importe quel langage côté serveur pour construire vos serveurs d’API REST, comme Python avec Django ou Flask, Node.js avec Express ou PHP

Nous supposerons que votre serveur exposera les points d’extrémité suivants

• POST /upload Télécharger un fichier
• GET /files Obtenir une liste de fichiers
• GET /files/[nom de fichier] Télécharger un fichier

Étape 1 – Initialiser votre projet Angular 13 et créer les artefacts de base

Commençons par initialiser votre projet Angular 13 en utilisant Angular CLI, l’outil officiel créé par l’équipe derrière Angular

Dirigez-vous vers une nouvelle interface de ligne de commande et créez un nouveau projet Angular 13 en exécutant la commande suivante

$ ng new Angular13UploadDemo
? Souhaitez-vous ajouter le routage Angular ? Non
? Quel format de feuille de style souhaitez-vous utiliser ? CSS

Ensuite, vous devez générer les artefacts suivants à l’aide du CLI Angular

$ cd Angular13UploadDemo

$

 ng g s upload

$

 ng g c upload

Nous avons généré un composant et un service pour mettre en œuvre notre exemple de téléchargement de fichiers. Le CLI va générer les artefacts et les importer dans le fichier src/app/app.module.ts

Le service Angular sera disponible dans le fichier src/app/upload.service.ts et devra exporter deux méthodes upload et get pour télécharger et obtenir des fichiers à partir du serveur API REST

Le composant Angular contiendra le code de présentation pour la mise en place de notre interface utilisateur de téléchargement de fichiers. Il réside dans le fichier src/app/upload/upload.component.ts et contient un formulaire et des barres de progression

Angular est un framework avec une structure basée sur des NgModules et des composants qui vous permettent de construire des applications avec une approche modulaire et basée sur des composants. Votre application Angular possède un module racine et un composant racine, mais vous pouvez par la suite créer autant de modules et de composants que vous le souhaitez

Les modules sont constitués d’un ou plusieurs composants. Un composant contrôle une partie de l’interface utilisateur de votre application. Les composants sont liés à des modèles HTML qui définissent les vues de votre application. Outre les modules et les composants, nous disposons également d’autres artefacts, tels que les services qui vous permettent d’encapsuler des fonctionnalités qui peuvent être réutilisées dans l’ensemble de votre application et de tirer parti de l’injection de dépendance Angular pour fournir la fonctionnalité à tout composant ou même à d’autres services qui en ont besoin sans répéter le code. Dans cet exemple, nous utiliserons un service qui encapsule le code nécessaire pour télécharger plusieurs fichiers sur un serveur

Étape 2 – Importation du module HttpClient

Ensuite, importons le module HttpClient dans notre application

Ouvrez le fichier src/app/app.module.ts et importez le module HttpClient comme suit

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
import { UploadComponent } from './upload/upload.component';

 @NgModule({
 declarations : [
 AppComponent,
 UploadComponent
 ],
 imports : [
 BrowserModule,
 HttpClientModule
 ],
 providers : [],
 bootstrap : [AppComponent]
})
export class AppModule { }

Étape 3 – Ajout de Bootstrap 4

Après avoir créé le projet, vous devez installer Bootstrap 4 et l’intégrer à votre projet Angular 13

Retournez à votre interface de ligne de commande et exécutez la commande suivante pour installer Bootstrap 4 et jQuery à partir de npm

$ npm install --save bootstrap jquery

(Dans ce cas, bootstrap v4 et jquery v3 sont installés)

Enfin, ouvrez le fichier angular.json et ajoutez les chemins des fichiers CSS et JS de Bootstrap ainsi que jQuery aux tableaux styles et scripts sous la cible de construction

"architect": {
 "build": {
 [...],
 "styles": [
 "src/styles.css",
 "node_modules/bootstrap/dist/css/bootstrap.min.css"
 ],
 "scripts": [
 "node_modules/jquery/dist/jquery.min.js",
 "node_modules/bootstrap/dist/js/bootstrap.min.js"
 ]
 },

Étape 4 – Mise en œuvre du service de téléchargement de fichiers multiples d’Angular 13

Dans la première étape, nous avons généré un service pour encapsuler la fonctionnalité de téléchargement de fichiers multiples, dans cette étape nous allons implémenter les méthodes nécessaires

Fondamentalement, notre service appellera les méthodes HttpClient pour envoyer des requêtes HTTP au serveur et exportera les méthodes suivantes

• upload(): Cette méthode sera appelée par le composant pour télécharger un fichier vers le serveur. Elle renvoie un Observable<HttpEvent<any>>.
• getFiles() : Cette méthode sera appelée par le composant pour obtenir une liste de fichiers.

Ouvrez le fichier src/app/upload.service.ts et mettez-le à jour comme suit

import { Injectable } from '@angular/core';
import { HttpClient, HttpRequest, HttpEvent } from '@angular/common/http';
import { Observable } from 'rxjs';

 @Injectable({
 providedIn : 'root'
})
export class UploadService {

 private serverUrl = 'http://localhost:8080';

 constructor(private httpClient : HttpClient) { }

 upload(file : File) : Observable<HttpEvent<any>>{
 const formData : FormData = new FormData() ;

 formData.append('file', file) ;

 const request = new HttpRequest('POST', `${this.serverUrl}/upload`, formData, {
 reportProgress : true,
 responseType : 'json'
 }) ;

 return this.httpClient.request(request) ;
 }

 getFiles() : Observable<any>{
 return this.httpClient.get(`${this.serverUrl}/files`) ;
 }

}

Dans la méthode de téléchargement, nous utilisons FormData pour stocker les données de notre formulaire sous forme de paires clé-valeur et nous définissons reportProgress : true pour demander au client HTTP d’émettre des événements de progression

Enfin, nous appelons la méthode request() de HttpClient pour envoyer un POST HTTP afin de télécharger les fichiers vers le serveur Rest

Dans la méthode getFiles, nous appelons la méthode get de HttpClient pour envoyer une méthode HTTP Get afin d’obtenir les fichiers téléchargés depuis le serveur

Étape 5 – Création de l’interface utilisateur Angular 13 pour le téléchargement de plusieurs fichiers

Après avoir implémenté le service qui encapsule le code pour le téléchargement de plusieurs fichiers ou images, créons maintenant l’interface utilisateur

Ouvrez le fichier src/app/upload/upload.component.ts et commencez par ajouter les imports suivants

import { Component, OnInit } from '@angular/core';
import { UploadService } from 'src/app/upload.service';
import { HttpEventType, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs'

Ensuite, définissez les variables suivantes et injectez UploadService via le constructeur du composant comme suit

export class UploadComponent implements OnInit {

 selectedFiles : FileList ;
 progressInfos = [] ;
 message = '';

 fileInfos : Observable<any>| null = null;

 constructor(private uploadService : UploadService) { }

}

Le tableau progressInfos sera utilisé pour afficher la progression du téléchargement de chaque fichier

Ensuite, ajoutez le code suivant dans la méthode ngOnInit() pour obtenir les fichiers lorsque le composant est initialisé

ngOnInit() : void {
 this.fileInfos = this.uploadService.getFiles() ;

}

Ensuite, définissez la méthode selectFiles() pour obtenir les fichiers sélectionnés que vous devez télécharger comme suit

selectFiles(e) : void {
 this.progressInfos = [] ;
 this.selectedFiles = e.target.files ;

}

Maintenant, itérer sur les fichiers sélectionnés ci-dessus et invoquer la méthode upload() sur chaque fichier comme suit

uploadFiles() : void {
 this.message = '';

 for (let i = 0; i < this.selectedFiles.length ; i ) {
 this.upload(i, this.selectedFiles[i]) ;
 }

}

Ensuite, définissez la méthode upload() pour télécharger chaque fichier comme suit

upload(idx, file) : void {
 this.progressInfos[idx] = { value : 0, fileName : file.name } ;

 this.uploadService.upload(file).subscribe(
 event => {
 if (event.type === HttpEventType.UploadProgress) {
 this.progressInfos[idx].value = Math.round(100 * event.loaded / event.total) ;
 } else if (event instanceof HttpResponse) {
 this.fileInfos = this.uploadService.getFiles() ;
 }
 },
 err => {
 this.progressInfos[idx].value = 0;
 this.message = 'Could not upload the file:' file.name ;
 }) ;

}

Nous utilisons idx pour accéder à l’index du fichier en cours afin d’accéder aux informations de progression correspondantes dans le tableau progressInfos. Ensuite, nous invoquons la méthode upload() de notre service avec le fichier passé en paramètre

Nous calculons le pourcentage de progression en utilisant les valeurs event.loaded et event.total

Une fois le téléchargement du fichier terminé, l’événement sera un objet HttpResponse. Nous invoquons donc la méthode getFiles() de notre service pour obtenir les informations sur les fichiers et nous assignons le résultat à la variable fileInfos

Ensuite, ajoutez les balises suivantes au fichier src/app/upload/upload.component.html pour créer l’interface utilisateur permettant de télécharger plusieurs fichiers ou images avec des barres de progression

<div *ngFor="let progressInfo of progressInfos" class="mb-2">
 <span>{{ progressInfo.fileName }}</span>
 <div class="progress">
 <div
 class="progress-bar progress-bar-info progress-bar-striped"
 role="progressbar"
 attr.aria-valuenow="{{ progressInfo.value }}"
 aria-valuemin="0"
 aria-valuemax="100"
 [ngStyle]="{ width : progressInfo.value'%' }"
 >
 {{ progressInfo.value }}%
 </div>
 </div>
</div>

<label class="btn btn-default">
 <input type="file" multiple (change)="selectFiles($event)" />
</label>

<button
 class="btn btn-success"
 [disabled]=" !selectedFiles"
 (click)="uploadFiles()">
 Upload
</button>

<div class="alert-light" role="alert">{{ message }}</div>

<div class="card">
 <div  class="card-header">Liste des fichiers</div>
 <ul
 class="list-group list-group-flush"
 *ngFor="let file of fileInfos | async"
 >
 <li class="list-group-item">
 <a href="{{ file.url }}">{{nom.fichier }}</a>
 </li>
 </ul>
</div&gt

Ajout du composant à l’App Component

Puisque nous n’avons pas implémenté le routage dans notre application et que nous n’avons que deux composants – les composants App et Upload, nous devons inclure le composant upload dans le composant App à l’aide de son sélecteur

Ouvrez le fichier src/app/app.component.html et incluez le composant Upload à l’aide de la balise <app-upload>

<h1>{{ title }}</h1>

<div class="container">
 <app-upload></app-upload>
</div&gt

Étape 6 – Exécution de l’application Angular 13

Si vous avez un serveur API REST en cours d’exécution et que vous souhaitez tester votre application, il vous suffit d’exécuter la commande ng serve à partir du dossier de votre projet

Ensuite, naviguez vers l’adresse http://localhost:4000/ pour jouer avec votre application

Conclusion

Tout au long de ce tutoriel, nous avons vu par l’exemple comment construire une application avec Angular 13 pour télécharger plusieurs fichiers et images avec des barres de progression en utilisant Angular 13 HttpClient et FormData. Nous avons stylisé l’interface utilisateur avec Bootstrap 4.