Comment télécharger plusieurs fichiers dans une application angulaire

Découvrez un exemple pratique de la manière de permettre aux utilisateurs de télécharger des fichiers vers une application Angular, avec des étapes telles que l’autorisation de plusieurs fichiers, la restriction du type de fichier, l’affichage des téléchargements réussis et l’ajout d’une zone de glisser-déposer.

Les applications Web font bien plus que simplement afficher ou modifier des données ; parfois, nous devons mettre des fichiers, des images ou des PDF sur le Web. Vous avez probablement vu des formulaires Web vous permettant de sélectionner des fichiers sur votre ordinateur. Nous allons utiliser cette fonctionnalité et un peu de code pour permettre aux utilisateurs de télécharger des fichiers sur notre application Angular.

Introduction

Au début, il peut sembler que nous pouvons tout faire avec le sélecteur de fichiers en HTML. Pour découvrir à quel point c’est simple et si c’est la meilleure façon de résoudre de vrais problèmes, essayons-le avec un exemple pratique. Nous verrons ce que nous pouvons faire et quand il serait préférable d’utiliser une approche différente qui ne ralentira pas le développement ni ne rendra les choses plus difficiles pour les utilisateurs.

Scénario

Imaginez une situation dans laquelle une entreprise souhaite créer une page Web permettant aux gens de télécharger des photos de leur voyage à Minorque. Nous voulons garder les choses simples, alors voici ce dont nous avons besoin :

• Permettez aux utilisateurs de télécharger une ou plusieurs photos.
• Assurez-vous qu’ils ne peuvent télécharger que des images, pas de vidéos ou d’autres fichiers.
• Afficher une liste des photos qu’ils ont téléchargées.
• Ajoutez une zone de glisser-déposer pour faciliter le téléchargement.

Maintenant, commençons !

Configurer le projet

Dans votre terminal, exécutez la commande suivante pour créer un nouveau projet Angular nommé upload-menorca-photos :

ng new upload-menorca-photos
? Which stylesheet format would you like to use? CSS
? Do you want to enable Server-Side Rendering (SSR) and Static Site Generation (SSG/Prerendering)? No

cd upload-menorca-photos

Allez au upload-menorca-photos dossier, modifiez le app.component.html et supprimez le code HTML par défaut pour être prêt pour notre prochaine étape.

Maintenant que notre projet Angular est prêt, l’étape suivante consiste à simuler un appel API. Cela nous aidera à imiter le comportement du monde réel lors du téléchargement de fichiers et des interactions avec le serveur, sans réellement nous connecter à un serveur en direct.

Création d’un faux appel API

Parce qu’il s’agit d’un MVP (produit minimum viable), nous souhaitons créer un service fictif qui simule le processus de téléchargement d’images. Nous utiliserons ce service pour générer de fausses URL d’images après un délai simulé.

Créez un nouveau service appelé fake-image-upload en utilisant Angular/CLI dans le répertoire src/app en exécutant la commande suivante

ng g s services/fake-image-upload 
CREATE src/app/services/fake-image-upload.service.spec.ts (404 bytes)
CREATE src/app/services/fake-image-upload.service.ts (144 bytes)

Nous n’approfondirons pas le fonctionnement des services et de RxJS. Au lieu de cela, nous allons créer une méthode appelée uploadImage avec le paramètre image de type File. Cette méthode renvoie un observable de type chaîne, simulant une fausse réponse d’image API avec un délai de trois secondes.

Le code final ressemble à :

import { Injectable } from '@angular/core';
import { Observable, delay, of, timeout } from 'rxjs';

@Injectable({
  providedIn: 'root',
})
export class FakeImageUploadService {
  uploadImage(image: File): Observable<string> {
    console.log(`we are uploading fake upload ${image.name}`);
    return of('https://random.imagecdn.app/500/150').pipe(delay(3000));
  }
}

En savoir plus sur RxJS et Services angulaires.

Créer le composant de téléchargement d’images

Nous devons fournir un composant avec un <input type="file"> pour télécharger l’image. Il utilisera le faux service. Commençons par générer un nouveau composant nommé image-upload en utilisant la CLI angulaire :

ng g c components/image-upload 
CREATE src/app/components/image-upload/image-upload.component.html (27 bytes)
CREATE src/app/components/image-upload/image-upload.component.spec.ts (595 bytes)
CREATE src/app/components/image-upload/image-upload.component.ts (225 bytes)     
CREATE src/app/components/image-upload/image-upload.component.css (0 bytes)      
UPDATE src/app/app.module.ts (429 bytes)

Ouvrez le fichier image-upload.component.ts, injectez le FakeImageUploadService en utilisant la fonction inject. Ajouter une nouvelle méthode upload(). Cette méthode appellera la fausse méthode du service.

import { FakeImageUploadService } from './../../services/fake-image-upload.service';
import { Component, inject } from '@angular/core';

@Component({
  selector: 'app-image-upload',
  standalone: true,
  imports: [],
  templateUrl: './image-upload.component.html',
  styleUrl: './image-upload.component.scss',
})
export class ImageUploadComponent {
  fakeImageUploadService = inject(FakeImageUploadService);
}

Cependant, le uploadImage La méthode attend un fichier. Comment savoir quand l’utilisateur a sélectionné une image ? Pour résoudre ce problème, ajoutez une nouvelle propriété appelée selectedImages de type FileList pour stocker la ou les images sélectionnées. Ensuite, écoutez le (change) événement et liez-le à une nouvelle méthode onImageSelected.

Dans le onImageSelected méthode, nous validerons si l’entrée a un fichier sélectionné et le définirons comme premier élément dans selectedImages.

Le code final du fichier image-upload.component.ts devrait ressembler à ceci :

import { Component, inject } from '@angular/core';
 import { FakeImageUploadService } from './../../services/fake-image-upload.service';

@Component({
  selector: 'app-image-upload',
standalone: true,
imports: [],
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css'],
})
export class ImageUploadComponent {
 fakeImageUploadService = inject(FakeImageUploadService);

  selectedImages!: FileList;
  onImageSelected(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
    if (inputElement?.files && inputElement.files.length > 0) {
      this.selectedImages = inputElement.files;
    }
  }

  upload(): void {
    this.fakeImageUploadService.uploadImage(this.selectedImages[0]);
  }
}

Ensuite, ouvrez et ajoutez l’entrée et le bouton, puis liez-les au balisage image-upload.component.html. Liez la méthode et écoutez les événements. Le balisage final devrait ressembler à :

<input type="file" (change)="onImageSelected($event)">
<button (click)="upload()">Upload Image</button>

En savoir plus sur Fichier d’entrée.

Utiliser le composant de téléchargement d’images

Avant d’utiliser le ImageUploadComponentdans le app.component, il faut importer le composant dans les sections importations.

import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterOutlet } from '@angular/router';
import { ImageUploadComponent } from './components/image-upload/image-upload.component';

@Component({
  selector: 'app-root',
  standalone: true,
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss',
  imports: [CommonModule, RouterOutlet, ImageUploadComponent],
})
export class AppComponent {
  title = 'upload-menorca-photos';
}

Ajouter le ImageUploadComponent au app.component.html en utilisant le sélecteur <app-image-upload>:

<div>
  <h1>Welcome to Image Upload App</h1>
</div>
<app-image-upload/>

Enregistrez vos modifications et exécutez ng serve pour lancer l’application.

Oui, nous avons maintenant une fonction de téléchargement très basique appelant le faux service !

Mais ce MVP est-il suffisant ? Non, nous avons beaucoup de travail à faire car nous sommes des professionnels et devons faire de notre mieux.

Ajouter les fonctionnalités MVP

Ce n’est que le début de notre aventure. Nous avons quelques tâches à accomplir pour le MVP. Abordons-les un par un.

• Autoriser les utilisateurs à télécharger une ou plusieurs images.
• Interdire les vidéos et autres extensions de fichiers.
• Afficher la liste des images enregistrées.
• Implémentez une zone de glisser-déposer pour des téléchargements plus rapides.

Autoriser les utilisateurs à télécharger un ou plusieurs fichiers

Par défaut, la fonction de téléchargement de fichiers permet de sélectionner un seul fichier. Cependant, en ajoutant l’attribut booléen multiple, l’entrée de fichier permet aux utilisateurs de sélectionner plusieurs fichiers.

Pour implémenter cela, ouvrez le fichier image-upload.component.html, ajoutez le multiple attribuez à l’élément d’entrée, enregistrez vos modifications, puis rouvrez l’application. L’entrée permettra désormais la sélection de plusieurs fichiers.

<div class="upload-area">
    <input type="file" multiple="true" (change)="onImageSelected($event)">
	<button (click)="uploadImage()">Upload Image</button>
</div>

Est-ce aussi simple qu’il y paraît ? Pas assez. Pour permettre la sélection de plusieurs fichiers, nous devons prendre quelques étapes supplémentaires au-delà de la simple modification de l’entrée HTML.

Nous devons apporter quelques ajustements à notre code pour faciliter les téléchargements multiples, et ces changements prépareront également le terrain pour une implémentation transparente de la zone glisser-déposer.

Le refactor

Refactorisons notre code. Ouvrez l’image-upload.component.ts généré et nous allons apporter quelques modifications :

• Ajouter le uploadFiles méthode. Il faut un paramètre images de type FileList. Utilisez une boucle for pour parcourir la liste des images sélectionnées et appeler le upload fonction pour chaque image, puis imprimez la réponse en utilisant console.log().
• Ajoutez une nouvelle méthode appelée upload. Avant de télécharger, validez si selectedImages sont disponibles.

Le code final ressemblera à ceci :

import { Component } from '@angular/core'; 
import { FakeImageUploadService } from './../../services/fake-image-upload.service';

@Component({
  standalone: true,
  selector: 'app-image-upload',
  templateUrl: './image-upload.component.html',
  styleUrls: ['./image-upload.component.css']
})
export class ImageUploadComponent {
  selectedImages!: FileList;
fakeImageUploadService = inject(FakeImageUploadService);
  
  onImageSelected(event: Event): void {
    const inputElement = event.target as HTMLInputElement;
      if (inputElement?.files && inputElement.files.length > 0) {
    	this.selectedImages = inputElement.files;
      }
  }
    
  upload(): void {
    if (this.selectedImages) {
      this.uploadFiles(this.selectedImages);
    }
  }

  private uploadFiles(images: FileList): void {
    for (let index = 0; index < images.length; index++) {
      const element = images[index];
      this.fakeImageUploadService.uploadImage(element).subscribe((p) => {
		console.log(p)
      });
    }
  }
}

Enregistrez les modifications, puis sélectionnez plusieurs fichiers (y compris une vidéo) et vérifiez dans la console pour voir les noms des fichiers.

Ne pas autoriser les vidéos ou autres extensions

Le prochain défi consiste à interdire les vidéos. Nous pouvons y parvenir en utilisant l’attribut accept, qui accepte un ou plusieurs spécificateurs de type de fichier comme valeur. Ouvrez le fichier image-upload.component.html et ajoutez l’attribut accept avec la valeur image/*.

Lorsque l’utilisateur clique sur l’explorateur de fichiers, celui-ci affichera uniquement des images, ce qui permettra d’éviter les erreurs de l’utilisateur lors du téléchargement.

<input type="file" multiple="true" (change)="onImageSelected($event)" accept="image/*">
<button (click)="upload()">Upload Image</button>

Enregistrez les modifications et rechargez la page pour voir le résultat suivant.

Parfait! Continuons avec la prochaine fonctionnalité !

Afficher les images téléchargées

Nous devons afficher les images de la réponse du service. Pour y parvenir, nous devons stocker chaque réponse dans un tableau et parcourir celui-ci. Suivez ces étapes dans image-upload.component.ts :

• Ajouter une nouvelle propriété : imagesUrl: Array<string> = [];
• Mettre à jour le uploadFiles méthode : dans le bloc d’abonnement, envoyez la réponse au tableau imagesUrl.

   private uploadFiles(images: FileList) {
      for (let index = 0; index < images.length; index++) {
        const element = images[index];
        this.fakeImageUploadService.uploadImage(element)
          .subscribe((p) => {
            
            this.imagesUrl.push(p)
        });
      }
    }

Ouvrez le fichier image-upload.component.html et utilisez @for pour parcourir le imagesUrl tableau.

<div class="images">
  @for (image of imagesUrl; track image) {
  <img  [src]="image" alt="Uploaded Image">
  }
</div>

Enregistrez les modifications et vous verrez les fausses réponses d’image affichées une fois que nous aurons reçu la fausse réponse.

La zone glisser-déposer

La dernière étape consiste à créer la zone de glisser-déposer avec téléchargement automatique. Pour y parvenir, nous devons suivre plusieurs étapes dans le fichier image-upload.component.ts.

• Ajoutez une nouvelle propriété appelée uploading pour activer une animation CSS pendant la phase de chargement.

export class ImageUploadComponent {  fakeImageUploadService =   inject(FakeImageUploadService);
  selectedImage!: FileList;
  imagesUrl: Array<string> = [];
  uploading = false;
    ..

• Met le uploading propriété à true lorsque le téléchargement démarre, puis revenez à false dans le uploadFiles méthode.

  private uploadFiles(images: FileList) {
      this.uploading = true;
      for (let index = 0; index < images.length; index++) {
        const element = images[index];
        this.fakeImageUploadService.uploadImage(element).subscribe((p) => {
          this.imagesUrl.push(p);
          this.uploading = false;
        });
      }
    }

• Ajoutez une méthode pour écouter le onDrop événement dans la zone glisser-déposer et écoutez également le dragOver événement pour empêcher le navigateur d’ouvrir le fichier.

   onDrop(event: DragEvent): void {
      event.preventDefault();
      if (event?.dataTransfer?.files) {
        this.uploadFiles(event.dataTransfer.files);
      }
    }
    onDragOver(event: DragEvent): void {
      event.preventDefault();
    }

Ensuite, ajoutez quelques styles CSS pour l’animation de chargement et la zone de glisser-déposer. Ouvrez le fichier image-upload.component.css et remplacez son contenu actuel par le code suivant :

:host {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
  background-color: #f7f7f7;
}

.drag-drop-area {
  border: 2px dashed #ccc;
  padding: 40px;
  text-align: center;
  cursor: pointer;
}

.upload-area {
  padding: 1rem;
}

.uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100px;
}

.uploading::after {
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-top-color: #333;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.drag-drop-area p {
  margin: 0;
}

.drag-drop-area:hover {
  background-color: #f2f2f2;
}

.images {
  padding-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.images > img {
  border-radius: 0.5rem;
  max-width: 100%;
  height: auto;
}

La dernière étape consiste à créer la zone de glisser-déposer avec un téléchargement automatique dans le fichier image-upload.component.html. Écoutez le drop et dragover événements et liez-les aux méthodes créées précédemment.

• Créer un <div> avec la classe glisser-déposer-zone et écoutez deux événements : drop et dragover.
• Utiliser la liaison de classe pour appliquer le uploading classe, qui affichera un indicateur de chargement lorsque le téléchargement démarre.

<div class="drag-drop-area" [class.uploading]="uploading" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
  <p>Drag and drop to automatic upload</p>
</div>

Enregistrez les modifications, ouvrez votre navigateur Web et accédez à http://localhost:4200. Vous verrez maintenant l’application de téléchargement d’images avec la zone de glisser-déposer et la saisie de fichiers pour les téléchargements d’images.

Conclusion

Nous avons créé avec succès une version de base d’un téléchargeur et vous avons guidé tout au long du processus de création d’une application angulaire capable de télécharger plusieurs images. Tout au long de ce didacticiel, nous avons couvert les fonctionnalités essentielles, notamment la fonctionnalité glisser-déposer, la validation des images et l’affichage des téléchargements réussis.

Il est important de reconnaître les défis et les limites que nous avons rencontrés au cours de ce processus, notamment en ce qui concerne l’expérience utilisateur et la complexité du développement.

Défis et limites

• Expérience utilisateur: Bien que notre outil de téléchargement d’images couvre les principes fondamentaux, il n’offre peut-être pas l’expérience la plus intuitive et la plus conviviale. Les utilisateurs attendent souvent des fonctionnalités supplémentaires telles que des aperçus d’images, la gestion des erreurs et la possibilité de supprimer les images téléchargées. L’amélioration de ces aspects peut grandement améliorer l’expérience utilisateur globale.

• Complexité du code : Construire un outil de téléchargement d’images riche en fonctionnalités peut être assez complexe, en particulier lorsqu’il intègre des fonctionnalités telles que la prise en charge du glisser-déposer, la validation des fichiers et le suivi de la progression, dont nous n’avons même pas abordé la dernière dans notre MVP. Cette complexité peut rendre le code plus difficile à maintenir et à étendre au fil du temps.

• Évolutivité : Notre implémentation actuelle ne prend pas en compte les scénarios dans lesquels les utilisateurs peuvent avoir besoin de télécharger un grand nombre d’images. Gérer efficacement les téléchargements de fichiers volumineux sans affecter les performances est un défi intéressant à explorer.

Dans notre prochain article, nous aborderons ces défis et améliorerons l’expérience de téléchargement d’images en utilisant le Kendo UI pour le téléchargement angulaire composant. Nous explorerons comment cela simplifie le développement, améliore l’expérience utilisateur et peut vous faire gagner du temps.

Code: https://github.com/danywalls/upload-menorca-photos.