Mettre en place blueimp-file-upload avec AngularJS

Mettre en place blueimp-file-upload avec Angularjs

Vous voulez ajouter un module d’upload de fichiers dans votre application Web AngularJS ?

Blueimp-file-upload est un candidat idéal : il est simple, plein de fonctionnalités et propose les directives adaptées à votre framework JavaScript préféré.
Voyons comment l’intégrer pas à pas.

Blueimp-file-upload ?

BlueImp-file-upload est un composant en JavaScript qui permet de gérer l’envoi de fichiers choisis par l’utilisateur de votre application vers un serveur Web.

Il permet plusieurs fonctionnalités, dont la gestion des files d’attente et de la progression du transfert des fichiers, l’affichage des miniatures des photos avant l’upload grâce à une autre librairie de blueimp, …

Des directives pour AngularJS sont fournies avec le projet pour simplifier son utilisation avec ce framework.

Mise en place du projet avec Yeoman

Pour cet article, je pars d’une nouvelle application Web générée avec yo angular.

Après avoir installé Yeoman et yo angular, créez d’abord une application Web :

yo angular:app test-blueimp

Pensez bien à inclure Twitter Bootstrap, comme la démonstration sur laquelle nous nous basons l’utilise.

Déclarez le composant :

bower blueimp-file-upload --save

Cette ligne de commande installe le composant et ses dépendances.

Enfin, ajoutez le module blueimp.fileupload dans app.js :

angular
.module('testBlueimpApp', [
	'ngCookies',
	'ngResource',
	'ngSanitize',
	'ngRoute',
	'blueimp.fileupload'
])

La vue

Comme la version de démonstration est très bien faite, basons-nous sur celle-ci pour cet article.

Récupérez le code de la vue sur Github, notamment le formulaire (entre <form> et </form> donc), puis collez-la soit dans la vue main.html existante, soit dans une nouvelle vue.

Détaillons les parties intéressantes de la vue.

Le formulaire

La première partie de la vue contient le champ de type file nécessaire pour laisser l’utilisateur choisir ses fichiers, ainsi que les boutons permettant de démarrer et d’arrêter l’upload.
Les actions submit() et cancel() viennent du composant et sont utilisables directement dans la vue.

Notez également l’objet options déclaré dans l’élément <form> avec la directive file-upload :

La barre de progression

La partie suivante permet l’affichage d’une barre de progression, décorée grâce à Twitter Bootstrap :

La liste de fichiers

Enfin, les fichiers sont affichés, à la fois ceux qui sont choisis par l’utilisateur pour être envoyés, et ceux qui l’ont déjà été, déjà présents sur le serveur.

Ainsi, dans le cas des images, la miniature est affichée soit par le composant load-image de Blueimp avant l’envoi, soit par la miniature présente sur le serveur.

La présentation se fait dans un élément <table> de Bootstrap.

Des boutons individuels sont également présents pour envoyer un seul fichier ou le retirer de la liste.

Enfin, pendant le transfert, le fichier en cours a sa propre barre de progression.

Les contrôleurs

Gestion de l’upload

Le rôle principal de ce contrôleur est de définir les options du transfert.

Créez le contrôleur avec cette commande :

yo angular:controller Uploader

Copiez-y le code de la démo depuis Github en enlevant les références à github, et en modifiant l’URL d’upload en dur pour le moment.

Le début sert à définir les options (ici, l’URL du script d’upload), le reste du code sert à afficher les fichiers déjà transférés sur le serveur, grâce au script d’upload de la version de démonstration.

En clair : si vous avez déjà votre propre mécanisme, vous pouvez ne conserver que la définition des options.

Ensuite, pensez à changer le nom du contrôleur dans la vue (main.html) : remplacez DemoFileUploadController par UploaderCtrl.

Gestion de la suppression

Tout comme la partie du contrôleur précédent servant à afficher les fichiers déjà uploadés, ce contrôleur est propre à la partie serveur livrée avec blueimp-file-upload.

Il sert à supprimer les fichiers déjà transférés sur le serveur.

Si vous voulez le créer, saisissez :

yo angular:controller FileDestroy

Encore une fois, pensez à changer le nom du contrôleur dans le fichier main.html : FileDestroyController en FileDestroyCtrl.

Démarrage et configuration de bower-install

A ce stade, l’interface devrait être présentable.

Lancez le serveur avec grunt serve, bower-install ajoute les fichiers dans index.html.

Et là, dans le navigateur, c’est le drame : une erreur dans tmpl.js empêche le fonctionnement de l’application.

En fait tmpl.js est le moteur de templating des auteurs de blueimp-file-upload, mais cette fonctionnalité est déjà proposée par AngularJS.

Alors, désactivons ce composant, et deux autres, en les excluant de bower-install avec cette configuration de Gruntfile.js :

    bowerInstall: {
      app: {
        src: ['<%= yeoman.app %>/index.html'],
        ignorePath: '<%= yeoman.app %>/',
        exclude: [/tmpl.js/, /jquery.fileupload-ui.js/, /jquery.fileupload-jquery-ui.js/]
      }
    },

Ensuite, lancez grunt bowerInstall pour regénérer les références dans index.html.

Maintenant, l’interface fonctionne presque : blueimp-file-upload tente d’interroger le script d’upload, mais il n’est pas encore en place.

Installons celui de la démo.

La partie serveur

Les auteurs de blueimp-file-upload mettent à notre disposition une application côté serveur pour créer rapidement un serveur de fichiers simple, permettant l’upload et la consultation.

Elle est proposée dans différents langages : PHP, Node.js, Ruby, …

Pour le coup, j’ai choisi la version PHP :  avec un serveur Web local, copiez les fichiers index.php et UploadHandler.php dans un dossier nommé test-upload à la racine du dossier du serveur Web (comme l’URL indiquée dans les options est : http://localhost/test-upload/index.php).

Le résultat

Et voilà le travail :

Mettre en place blueimp-file-upload avec Angularjs : le résultat
Le résultat
Les deux premiers fichiers sont déjà sur le serveur, les deux autres attendent le top départ.

Le mot de la fin

A ce stade, vous avez une application AngularJS qui permet l’upload de fichiers simplement, avec une interface agréable et très personnalisable, et une gestion des files d’attente.

Dans le prochain article nous verrons comment personnaliser et adapter cette version de démonstration.


L'illustration de cet article est une image sous licence CC BY-SA 3.0 par Ikiwaner

Cet article vous a été utile ? Partage it !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Si vous le souhaitez, renseignez le champ 'Nom' de cette façon : 'VotreNom@VotreMotClef' pour obtenir une ancre optimisée pour les moteurs de recherche.