Construire un bouton de téléchargement de fichier sous des formes angulaires à l'aide de Kendo UI

Nous allons créer un bouton de téléchargement de fichier pour votre application Angular, étape par étape, à l'aide du composant de téléchargement fourni par Kendo UI. Nous allons également apprendre à utiliser l'API du composant pour ajouter des fonctionnalités supplémentaires.

Introduction

L'une des caractéristiques communes de la plupart des applications Web est la fonctionnalité de téléchargement. Aussi important que ce soit, son implémentation et la gestion de la soumission de fichiers dans l’une de vos applications Web ne devraient pas être une tâche difficile à accomplir.

Dans cet article, je vais vous montrer comment créer un bouton de téléchargement de fichier dans des formulaires angulaires à l'aide de Kendo UI Composant de téléchargement . En outre, nous allons également explorer et utiliser l'API de composant de téléchargement pour ajouter quelques fonctionnalités supplémentaires au bouton de téléchargement.

Installer l'interface de ligne de commande angulaire

Vous devez d'abord installer l'interface de ligne de commande angulaire sur votre ordinateur afin de commencer à créer. une application angulaire. Exécutez la commande suivante à cette fin:

 npm   install  -g @ angular / cli 

Ceci ajoutera globalement la CLI angulaire à votre machine.

Création de l'application angulaire

For Pour cette démonstration, créons une nouvelle application angulaire en exécutant la commande ci-dessous pour générer une application portant le nom Bouton kendo-angular-upload-:

 avec le nouveau bouton kendo-angular-upload-button. 

Une fois le processus d'installation terminé, changez de répertoire dans le projet nouvellement créé, comme indiqué ci-dessous, puis démarrez l'application:

 // change de répertoire.
 cd  Bouton kendo-angular-upload-upload

// lance l'application
ng serve 

Vous pouvez rencontrer une erreur avec le message ci-dessous dans votre console:

 ERREUR dans node_modules / rxjs / internal / types.d.ts (81,44): erreur TS1005: ';' 
 node_modules / rxjs / internal / types.d.ts (81,74): erreur TS1005: ';' attendue. 
 node_modules / rxjs / internal / types.d.ts (81,77): erreur TS1109: Expression attendue 

Il s'agit d'un problème connu sur GitHub et il est dû à un manque de compatibilité entre la version actuelle de TypeScript sur votre machine et rxjs . La solution rapide consiste à supprimer le dossier node_modules . Ouvrez maintenant le fichier package.json et dans l’objet dependencies, éditez les fichiers rxjs en supprimant ^ :

 "dépendances" :   {

. ... 
 "rxjs" :   "6.0.0"  
 "zone.js" :   "^ 0.8.26" 
}  

Enregistrez le fichier et exécutez à nouveau la commande npm install . Une fois le processus d'installation terminé, vous pouvez maintenant lancer l'application avec ng serve .

Ceci compilera votre application et démarrera le serveur de développement. Pour afficher la page par défaut de cette application angulaire, accédez à http: // localhost: 4200 à partir de votre navigateur préféré et vous verrez ceci:

Installer le composant de téléchargement angulaire

Ensuite, nous allons utiliser le composant ng add pour ajouter et installer l’application Kendo UI pour Angular Upload dans notre application. Appuyez sur CTRL + C pour arrêter l'application et exécutez la commande suivante pour installer le composant de téléchargement:

 Ng add @ progress / kendo-angular-upload 

La commande précédente installera le paquet et importera UploadModule BrowserAnimationsModule et HttpClientModule dans l'application du fichier app.module.ts : 19659037] // ./src/app/app/module.ts
    
importer {BrowserModule} depuis '@ angular / platform-browser';
importer {NgModule} de '@ angular / core';
importer {AppComponent} depuis './app.component';
importer {UploadModule} depuis '@ progress / kendo-angular-upload';
importer {BrowserAnimationsModule} depuis '@ angular / platform-browser / animations';
importer {HttpClientModule} à partir de '@ angular / common / http';
    
@NgModule ({
  déclarations: [
AppComponent
],
  importations: [
BrowserModule,
UploadModule,
BrowserAnimationsModule,
HttpClientModule
],
  fournisseurs: [],
  bootstrap: [AppComponent]
})
classe d'exportation AppModule {}

Ajouter le composant de téléchargement de fichier Kendo UI

Pour ajouter le composant de téléchargement de fichier à notre application Angular, nous allons créer un wrapper div, puis placer le à l'intérieur, comme indiqué ci-dessous:

 // ./src/app/app.component.html
    

  

    
    
  
 

Avant de démarrer l'application, ajoutez le contenu ci-dessous à l'élément ./ src / app / app / component.css

 .wrapper {
  marge supérieure: 50 px;
}
.contenu {
  largeur: 800px;
  marge: 0 auto;
  hauteur de ligne: 20px;
} 

Continuez maintenant pour relancer l’application en exécutant ng serve à partir du terminal situé dans le répertoire de l’application. Une fois l'application créée et diffusée sur http: // localhost: 4200, vous verrez ceci:

Téléchargement d'un fichier correctement chargé Le bouton dans une application angulaire est aussi simple que cela. Nous utiliserons l’API du composant de téléchargement Kendo UI Upload pour ajouter plus de fonctionnalités au bouton. Pour le moment, si vous cliquez sur le bouton Sélectionner les fichiers il sera automatiquement télécharger les fichiers sélectionnés. Il s’agit de la configuration par défaut qui peut être modifiée en définissant autoUpload sur false comme indiqué ici:

 // ./src/app/app.component .html
    

  

    
    
  
 

Lorsque autoUpload est défini sur false le téléchargement de fichiers ne se produit que s'il est explicitement confirmé par l'utilisateur au moyen d'un clic de souris, comme indiqué ci-dessous:

Restreindre le téléchargement de fichiers à l'aide d'extensions et de tailles

Vous pouvez également configurer les restrictions pour les fichiers pouvant être téléchargés en spécifiant les extensions autorisées. Pour ce faire, importez le module FileRestrictions de @ progress / kendo-angular-upload . Mettez à jour le fichier ./ src / app / app.component.ts comme indiqué ci-dessous:

 // ./src/app/app.component.ts
    
importer {composant} de '@ angular / core';
importer {FileRestrictions} de '@ progress / kendo-angular-upload';
@Composant({
  sélecteur: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
classe d'exportation AppComponent {
  myRestrictions: FileRestrictions = {
    autorisésExtensions: ['.jpg', '.png']
  };
} 

Ceci garantira que les fichiers avec des extensions non définies dans la propriété allowedExtensions ne seront pas téléchargés. Pour que cela fonctionne, vous devez ajouter la propriété restrictions à votre composant de téléchargement Kendo UI:

 // ./src/app/app.component.html
    

  

    
    
  
 

Conclusion

Dans cet article, vous avez appris à créer facilement un bouton de téléchargement de fichier simple dans une application Angular à l'aide de Kendo UI. La documentation officielle contient des informations détaillées sur l'API de composants de téléchargement de fichiers Kendo UI et d'autres fonctionnalités pouvant être ajoutées pour améliorer la fonctionnalité de téléchargement.

N'hésitez pas à explorer le code source ici sur GitHub ] et ajoutez plus de fonctionnalités à votre convenance.