Création d’un téléchargeur d’images avancé avec Kendo UI pour Angular

Découvrez à quel point il est plus rapide de créer un téléchargeur d’images avec le composant Upload de la bibliothèque Kendo UI for Angular.

Dans notre article précédent, nous avons créé un outil de téléchargement d’images avec prise en charge du glisser-déposer pour le produit minimum viable (MVP), en explorant les défis et les limites apparus lors du développement à l’aide de l’élément Fichier d’entrée. Pour être transparent et sincère avec vous, nous avons passé pas mal de temps, et le résultat a été assez médiocre, avec un manque de style et de fonctionnalités.

Il est maintenant temps de changer notre MVP en utilisant le puissant Télécharger composant de Progress Interface utilisateur Kendo pour angulaire. Ce composant Upload est un outil polyvalent qui simplifie le processus de gestion des téléchargements de fichiers dans les applications Angular. Il offre un large éventail de fonctionnalités et d’améliorations, ce qui en fait un excellent choix pour créer un outil de téléchargement d’images avancé.

Qu’allons nous faire

L’objectif est de créer le MVP, afin que vous disposiez d’un téléchargeur d’images robuste et convivial qui exploite la puissance de Kendo UI pour relever les défis auxquels nous avons été confrontés lors de l’itération précédente.

Nous allons apprendre comment ajouter Kendo UI Téléchargements à notre projet Angular, ainsi que comment ajouter d’autres fonctionnalités telles que la gestion des erreurs et la suppression d’images, pour améliorer l’expérience utilisateur.

Scénario

Vous souvenez-vous de tout le code que nous avons écrit dans le post précédent avec un résultat basique ? Dans cet article, nous avons créé un téléchargeur de fichiers à partir de zéro en utilisant Angular et l’élément de fichier HTML.

Nous avons rencontré les problèmes suivants :

• Manque d’interface utilisateur
• Pas de téléchargement automatique
• Pas de suivi des progrès ni de possibilité de supprimer des fichiers
• Aucune action une fois le processus de téléchargement du fichier terminé

Et si je vous disais que nous pouvons désormais avoir une interface utilisateur bien améliorée avec moins de code et en un temps record ?

Cela ressemble à un rêve, non ? Tirons parti de l’interface utilisateur de Kendo pour nous aider à créer un excellent outil de téléchargement de fichiers en un rien de temps.

Configurer le projet

Dans votre terminal, exécutez la commande suivante pour cloner notre projet nommé upload-menorca-photos:

git clone https://github.com/danywalls/upload-menorca-photos.git
Cloning into 'upload-menorca-photos'...
remote: Enumerating objects: 66, done.
remote: Counting objects: 100% (66/66), done.
remote: Compressing objects: 100% (39/39), done.
Receiving objects: 100% (66/66), 123.72 KiB | 1.49 MiB/s, done.
Resolving deltas:   0% (0/21)
Resolving deltas: 100% (21/21), done.

Accédez au upload-menorca-photos dossier et exécutez le npm install commande dans le terminal pour installer toutes les dépendances requises, garantissant ainsi que nous sommes prêts pour notre prochaine étape.

Installer Kendo UI pour le téléchargement angulaire

Maintenant, continuez à utiliser le schéma angulaire pour installer Kendo UI pour Angular Upload dans notre application en exécutant la commande suivante dans le terminal.

ng add @progress/kendo-angular-upload
ℹ Using package manager: npm
✔ Found compatible package version: @progress/kendo-angular-upload@13.4.0.
✔ Package information loaded.

The package @progress/kendo-angular-upload@13.4.0 will be installed and executed.
Would you like to proceed? Yes
✔ Packages successfully installed.
UPDATE src/app/app.module.ts (607 bytes)
UPDATE package.json (1559 bytes)
UPDATE angular.json (3040 bytes)
✔ Packages installed successfully.
UPDATE src/main.ts (266 bytes)
UPDATE tsconfig.app.json (310 bytes)
UPDATE tsconfig.spec.json (315 bytes)

Il ajoute automatiquement /// <reference types="@angular/localize" /> requis par Kendo Téléchargez dans le fichier main.ts

 

import { bootstrapApplication } from '@angular/platform-browser';
import { appConfig } from './app/app.config';
import { AppComponent } from './app/app.component';

bootstrapApplication(AppComponent, appConfig)
  .catch((err) => console.error(err));

Parfait! Commençons à écrire du code !

Kendo UI pour les téléchargements angulaires

Avant de commencer à l’utiliser, j’aimerais donner un bref aperçu des téléchargements de fichiers de Kendo UI. Il propose deux composants : Kendo UI FichierSélectionner et fichier d’interface utilisateur Kendo Télécharger. Chacun de ces composants vous aide à répondre à vos besoins de téléchargement de fichiers dans vos applications Angular. Cependant, vous vous demandez peut-être quand utiliser chacun d’eux.

• Interface utilisateur Kendo pour Angular FileSelect : Ce composant est utile lorsque vous avez besoin d’un contrôle total sur la façon dont les requêtes et les formulaires du serveur sont créés et envoyés. C’est comme une version plus avancée de l’élément d’entrée de fichier standard (<input type="file">) et offre des fonctionnalités telles que la connexion facile de modèles de données, l’utilisation de modèles, l’intégration avec des formulaires, etc.

• Interface utilisateur Kendo pour le téléchargement angulaire : Semblable à Kendo UI FileSelect, il vous permet d’envoyer des fichiers de votre système local vers l’application avec seulement quelques configurations. C’est très utile lorsque vous souhaitez minimiser le codage et déléguer plus de responsabilités à Kendo UI Upload. Il offre également un large éventail de fonctionnalités, notamment le téléchargement d’un ou de plusieurs fichiers, le regroupement de fichiers volumineux, la personnalisation de modèles, etc.

N’oubliez pas que nous travaillons sur un MVP, notre objectif est donc de le construire rapidement pour avoir le temps d’ajouter plus de fonctionnalités et de réutiliser le code. Commençons!

Utilisation des téléchargements de fichiers Kendo UI

Nous allons commencer à nettoyer notre code en utilisant le kendo-fileselect. Avant de commencer, cependant, nous devons fournir le HttpClient et les animations pour FileSelect dans le app.config.ts :

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';

export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideHttpClient(), provideAnimations()]
};

Ensuite, importez le UploadsModule dans image-upload.component.ts et ajoutez-le au tableau des importations.

import { UploadComponent, UploadsModule } from '@progress/kendo-angular-upload';

Puis ouvrez le image-upload.component.html fichier et supprimez le balisage HTML lié à notre « téléchargeur fait maison », en le remplaçant par une seule ligne comme <kendo-fileselect/>.

<div class="upload-area">
  <input type="file" multiple="true" (change)="onImageSelected($event)" accept="image/*">
  <button (click)="uploadImage()">Upload Image</button>
</div>
<div class="drag-drop-area" [class.uploading]="uploading" (drop)="onDrop($event)" (dragover)="onDragOver($event)">
  <p>Drag and drop to automatic upload</p>
</div>
 <div class="images">
  @for (image of imagesUrl; track image) {
    <img [src]="image" alt="Uploaded Image" />
  }
</div>

À:

<kendo-fileselect/>

Enregistrez les modifications et rechargez la page :

Ouais! Nous disposons désormais d’une puissante fonctionnalité de téléchargement prenant en charge plusieurs fichiers, un design attrayant, un affichage des informations sur les fichiers, une barre de progression, un bouton de suppression et même un téléchargement automatique. OH MON DIEU!

Il est temps de refactoriser !

Oui, de la même manière que nous avons réduit la quantité de balisage HTML dans le DOM, nous pouvons simplifier notre code en réutilisant le code existant.

Étant donné que Kendo UI Upload simplifie la plupart de nos tâches, il est temps de refactoriser notre code pour qu’il fonctionne avec Kendo UI File Uploader.

Ajouter une référence de modèle à kendo-fileselect comme pictureFileset ajoutez un nouveau bouton pour lier une nouvelle méthode appelée upload qui prend le kendo-fileselect comme paramètre.

Le code ressemble à :

<kendo-fileselect #pictureFiles />
<button (click)="upload(pictureFiles)">Upload</button>

Ouvrez le fichier image-upload.component.ts, et dans le upload méthode ajouter le paramètre pictureUploader: FileSelectComponent.

Nous allons exploiter la puissance du FileSelectComponent. Il simplifie notre code en fournissant une fileList avec tous les fichiers du composant FileSelect. Nous pouvons parcourir tous les fichiers, appeler le fakeImageUploaderServiceet poussez la réponse dans le imagesUrltout comme l’ancien code.

Une fois que vous avez terminé, utilisez le clearFiles() méthode pour supprimer tous les fichiers téléchargés.

Le code final ressemble à :

export class ImageUploadComponent {
imagesUrl: Array<string> = [];

upload(pictureUploader: FileSelectComponent) {
pictureUploader.fileList.files.forEach((file) => {
const imageFile = file[0].rawFile;
if (imageFile)
this.fakeImageUploadService
.uploadImage(imageFile)
.subscribe((response) => {
this.imagesUrl.push(response);
});
});

pictureUploader.clearFiles();
}
}

Enregistrez les modifications et rechargez ! Notre téléchargeur envoie maintenant l’image à la fausse API et récupère la réponse à l’aide du Kendo UI File Uploader.

Oui, cela fonctionne avec moins de code et une meilleure interface utilisateur. Mais et si je vous disais que nous pouvons aller plus loin et améliorer le MVP avec encore moins de code ?

Utiliser le téléchargeur de fichiers Kendo UI

Comme nous l’avons expliqué précédemment, Kendo UI File Uploader fonctionne avec une API prête à traiter le fichier et fournit certains événements comme le moment où un fichier a été traité et lorsque la liste entière est terminée.

Pour simuler les requêtes API, nous allons utiliser un HttpInterceptor, pour renvoyer HttpResponse OK.

Créez un nouveau fichier api.interceptor.ts, avec le code suivant :

 import { HttpEvent, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, delay, of } from 'rxjs';

export function apiInterceptor(
  req: HttpRequest<unknown>,
): Observable<HttpEvent<unknown>> {
  return of(new HttpResponse({ status: 200 })).pipe(delay(2000));
}

Accédez à votre app.config.ts et ajoutez l’intercepteur dans le provideHttpClient fonction, en passant le withInterceptors fonction et passer en paramètre le apiInterceptor fonction.

Le code final ressemble à :

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient, withInterceptors } from '@angular/common/http';
import { provideAnimations } from '@angular/platform-browser/animations';
import { apiInterceptor } from './services/api.interceptors';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(withInterceptors([apiInterceptor])),
    provideAnimations(),
  ],
};

Ensuite, remplacez le kendo-fileselect avec <kendo-uploader>et configurez certaines propriétés.

<kendo-upload
#kendoupload
saveUrl="'saveAPI'"
removeUrl="'removeAPI'"
(complete)="onFinish(kendoupload)"
(success)="onSave()"
/>

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

Pour configurer le téléchargement de l’interface utilisateur Kendo, fournissez un faux saveUrl et removeUrl. Ces valeurs représenteront la fausse sauvegarde et l’API URL. Ensuite, liez les événements terminés et réussis.

L’événement de réussite est déclenché lorsque chaque fichier est enregistré. Dans notre cas, nous créons le onSave() méthode, qui simule le transfert d’une nouvelle image vers le imagesUrl liste.

L’événement complet prend le UploadComponent composant en tant que paramètre et appelle le clearFiles() méthode pour nettoyer la liste lorsque tous les fichiers ont été traités.

Comme nous pouvons le voir, nous n’avons besoin que de deux lignes de code pour obtenir le même comportement qu’auparavant.

Le code final ressemble à ceci :

export class ImageUploadComponent {
imagesUrl: Array<string> = [];

  onFinish(file: UploadComponent) {
    file.clearFiles();
  }

  onSave() {
    this.imagesUrl.push('https://random.imagecdn.app/500/150');
  }
}

Enregistrez les modifications et examinez les différences :

Dans cette version, nous avons ajouté plus de fonctionnalités :

• Une barre de progression pour la suppression de fichiers
• La possibilité de supprimer des fichiers
• La possibilité de déclencher des actions lorsque chaque fichier a été traité et lorsque la liste entière est complétée

Nous faisons plus avec moins de code : c’est incroyable !

Conclusion

Nous avons appris à quel point il est facile de créer une application avec la fonctionnalité de téléchargement de fichiers. Kendo UI pour Angular Upload simplifie le processus de téléchargement de fichiers, réduisant ainsi la quantité de code nécessaire. Nous utilisons les deux versions : kendo-fileselect et kendo-uploader, chacune avec ses propres avantages.

Cet outil profite considérablement à votre équipe et à l’entreprise, en améliorant l’expérience utilisateur et en permettant le développement d’applications riches en un temps record. N’oubliez pas que moins de code signifie moins de bugs, et Kendo UI Upload nous aide à y parvenir.

Si vous souhaitez en savoir plus sur Kendo UI Upload, je vous recommande de consulter le documentation officielle pour explorer des fonctionnalités supplémentaires et afficher la liste complète des démos.

Et n’oubliez pas que vous pouvez essayer gratuitement la bibliothèque complète de Kendo UI pour Angular pendant 30 jours.

Essayez Kendo UI pour Angular