Personnaliser et configurer blueimp-file-upload pour AngularJS

Personnaliser et configurer blueimp-file-upload avec Angularjs

La semaine dernière nous avons vu comment mettre en place blueimp-file-upload dans votre application AngularJS pour le transfert de fichiers, à partir de la version de démonstration proposée avec le module.

Voyons comment la personnaliser.

Supprimer un fichier et vider la file d’attente

Commençons simplement, avec ces deux méthodes pour le contrôleur.

	$scope.emptyUploadList = function() {
		while ($scope.queue.length) {
			$scope.clear($scope.queue[0]);
		}
	};

	$scope.removeFileFromUploadList = function(file) {
		$scope.clear(file);
	};

Le formulaire est ailleurs

Le formulaire, et surtout le bouton de type file, peut être inséré n’importe où sur la page et caché par CSS.

Vous pouvez l’insérer dans index.html par exemple, avec ce code minimal :

<form id="fileupload" method="POST" enctype="multipart/form-data">
	<input id="uploadButton" type="file" name="files[]" multiple>
</form>

Pour l’utiliser, voilà un exemple de bouton destiné à sélectionner un ou plusieurs fichiers à uploader :

<button onclick="$('#uploadButton').click()">Ajouter des fichiers</button>

Le but ? J’en vois au moins deux :

  • décorer le bouton plus simplement. En effet, un bouton de type file n’est pas si évident à personnaliser
  • avoir autant de boutons que nécessaire, si vous avez besoin de transférer des fichiers sur plusieurs vues par exemple.

Personnaliser l’emplacement de la barre de progression et de la file d’attente

Dans le même registre, vous pouvez déplacer la file d’attente, les boutons de contrôle et la barre de progression là où bon vous semble.

Il est toutefois nécessaire de les inclure dans le contrôleur de l’uploader pour hériter de ses méthodes.

Par exemple, pour afficher une barre de progression générale sur toutes les vues et la liste des fichiers en cours de transfert dans une vue en particulier :

<div ng-controller="UploaderCtrl" file-upload="options">

	<div class="col-lg-5 fade" ng-class="{in: active()}">
		<div class="progress progress-striped active" file-upload-progress="progress()"><div class="progress-bar progress-bar-success" ng-style="{width: num + '%'}"></div></div>
		<div class="progress-extended">&nbsp;</div>
	</div>

	<div class="content" ng-view=""></div>

</div>

Activer l’autoupload

Passons maintenant aux options de blueimp-file-upload, en commençant par deux paramètres simples.

	$scope.options = {
		autoUpload: true,
		maxChunkSize: 1024 * 1024, // = 1Mo

Une fois l’autoupload activé, le transfert est démarré automatiquement dès qu’au moins un fichier est ajouté à la file d’attente.

Pensez bien à afficher le bouton de démarrage seulement quand l’autoupload est désactivé :

			<button type="button" class="btn btn-primary start" ng-click="submit()" ng-hide="options.autoUpload">
				<i class="glyphicon glyphicon-upload"></i>
				<span>Start upload</span>
			</button>

Activer le chunck

Cette option est simple à activer, la difficulté vient (ou pas) de la gestion côté serveur.

Activer le chunck permet le découpage des fichiers dont la taille est supérieure à la valeur fournie en plusieurs parties.

Cette fonctionnalité permet d’éviter les limitations de taille côté serveur.
Par exemple, si PHP n’autorise pas l’upload de fichiers dont la taille dépasse 10Mo, le chunck permet de découper en fichiers de 1Mo, pour les assembler côté serveur.

Ajout de données au formulaire

Il est possible d’ajouter des données qui seront transmises avec chaque fichier avec le paramètre formData, utile pour transmettre un identifiant de session par exemple.

		formData: function() {
			return [{name: 'sessionId', value: $scope.sessionId}];
		}

Personnaliser l’URL pour chaque fichier envoyé

Si vous avez besoin de transférer des fichiers en utilisant des URL différentes pour chaque fichier, si vous donnez la possibilité de choisir le dossier sur le serveur par exemple, vous pouvez indiquer l’URL dans la méthode add().

		add: function(e, data) {
			data.url = baseUrl + '?folder=' + $scope.folder;
			fileUpload.defaults.add(e, data);
		},

Notez l’appel à la méthode add() d’origine avec fileUpload.defaults.add(), pour laisser se dérouler le comportement par défaut.

D’ailleurs le service fileUpload est accessible parce qu’il est déclaré dans le contrôleur :

.controller('UploaderCtrl', function ($scope, fileUpload) {

Gérer les erreurs

Si vous utilisez un mécanisme différent pour gérer les erreurs que celui de l’application d’upload de démonstration, vous aurez certainement besoin d’adapter la méthode fail() :

		fail: function(e, data) {
			data.textStatus = 'error';
			data.errorThrown = data.result.reason + ' (' + data.result.errorCode + ')';
			fileUpload.defaults.fail(e, data);
		},

data.textStatus doit contenir le texte error, mais vous êtes libre d’insérer ce que vous voulez dans data.errorThrown, qui est le message qui est affiché en cas de problème.

Le mot de la fin

Vous avez bien sûr la possibilité d’implémenter vos propres services et directives, mais utiliser ceux existants facilite entre autres la mise à jour du module.

L'illustration de cet article est une image sous licence CC0 1.0 par Spielvogel

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.