Comment gérer l'upload d'un fichier avec AngularJS ?
La manière la plus simple de créer soi-même sa gestion d'upload de fichier consiste à utiliser HTML5 qui fournit l'API FileReader, destinée à gérer l'ajout de fichier.
L'upload de fichier consiste à envoyer un fichier sur un site internet. Il est très souvent utilisé sur de nombreux sites pour, par exemple, mettre en ligne des photos ou des vidéos.
Avec AngularJS, ajoutez tout d'abord dans votre vue un input de type file, qui permet de sélectionner un fichier, puis un bouton avec, comme attribut, ng-click qui contiendra une fonction qui gérera le fichier.
<input type=file id=fichier name=fichier/> <button ng-click=ajouter()>Ajouter</button>
Dans votre contrôleur, créez la fonction ajouter(). Dans cette fonction, vous instanciez un objet de la classe FileReader et utilisez l'événement onloadend qui est appelé quand le chargement du fichier est terminé. Ajoutez alors une fonction qui récupère les données et effectue le traitement. Pour lancer la lecture du fichier par l'objet FileReader, utilisez la méthode readAsArrayBuffer().
$scope.ajouter = function(){
var fichier = document.getElementById('fichier').files[0],
var lecture = new FileReader();
lecture.onloadend = function(evenement){
var donnees = evenement.target.result;
//Traitez ici vos données binaires. Vous pouvez par exemple les envoyer à un autre niveau du framework avec $http ou $ressource
}
lecture.readAsBinaryString(fichier);
}
Cette solution est compatible avec les navigateurs Firefox (version bureau >= 3.6, version mobile >= 32), Chrome (version bureau >= 7, version mobile >= 3), Internet Explorer (version >= 10), Opera (version bureau >= 12.02, version mobile >= 11.5) et Safari (version bureau >= 6.0.2, version mobile >= 6.1).
Si vous ne souhaitez pas développer vous-même une solution, de nombreux développeurs ont conçu des plugins qui gèrent l'upload de fichier. En plus d'offrir une plus grande simplicité, ces plugins peuvent avoir une meilleure compatibilité avec des navigateurs plus anciens, car ils utilisent d'autres éléments HTML apparus dans des versions précédentes, comme les iFrames. Les plugins suivants sont tous hébergés sur GitHub :