intégration de téléchargeur de fichiers pour angularjs

En fait, j’ai déjà lancé mon propre uploader … mais uniquement parce que je n’aimais pas ceux de JQuery déjà créés. Malheureusement c’est propriétaire et je ne peux pas le poster sur internet … mais … je peux vous montrer comment utiliser à peu près n’importe quel plugin JQuery depuis Angular:

Quelqu’un dira probablement qu’il est facile d’utiliser un téléchargeur existant et de l’intégrer à AngularJS – à cela je dirai: si c’est facile, alors quelqu’un devrait l’avoir déjà fait.

Supposons que j’ai un plugin jQuery qui fonctionne en sélectionnant un div et en appelant pluginUploadCall() dessus …

 app.directive('myJqueryPluginUploader', function() { return { ressortingct: 'A', link: function(scope, elem, attr, ctrl) { // elem is a jQuery lite object // or a jQuery object if jQuery is present. // so call whatever plugins you have. elem.pluginUploadCall(); } }; }); 

Et voici comment il serait utilisé.

Angular s’intègre vraiment bien avec jQuery, donc tous les plugins qui fonctionnent dans jQuery devraient fonctionner assez facilement dans Angular. La seule difficulté réside dans le fait que vous souhaitez garder en vie l’dependency injection afin de pouvoir tester votre application angular. JQuery n’est pas très bon en DI, donc vous devrez peut-être sauter à travers quelques obstacles.

Si vous vouliez rouler vous-même, je peux vous dire que j’ai fait quelque chose comme ceci:

 app.directive('customUploader', function(){ return { ressortingct: 'E', scope: {}, template: '
Drop Files HereUpload
', controller: function($scope, $customUploaderService) { $scope.notReady = true; $scope.upload = function() { //scope.files is set in the linking function below. $customUploaderService.beginUpload($scope.files); }; $customUploaderService.onUploadProgress = function(progress) { //do something here. }; $customUploaderService.onComplete = function(result) { // do something here. }; }, link: function(scope, elem, attr, ctrl) { fileInput = elem.find('input[type="file"]'); fileInput.bind('change', function(e) { scope.notReady = e.target.files.length > 0; scope.files = []; for(var i = 0; i < e.target.files.length; i++) { //set files in the scope var file = e.target.files[i]; scope.files.push({ name: file.name, type: file.type, size: file.size }); } }); } }); 

Où $customUploaderService serait un service personnalisé que vous créez avec Module.factory() qui utilise $http pour publier les fichiers et vérifier la progression sur le serveur.

Je sais que c'est vague, et je suis désolé, c'est tout ce que je peux vous fournir, mais j'espère que cela vous aidera.

EDIT: Le téléchargement de fichier par glisser-déposer est un peu une astuce de CSS, BTW ... pour Chrome et FF, ce que vous faites est de placer le dans un div contenant ... puis faites quelque chose comme ceci:

 
Drop Files Here 

 div.uploadContainer { position: relative; width: 600px; height: 100px; } div.uploadContainer input[type=file] { visibility: hidden; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } 

... maintenant tout ce que vous déposez sur ce div sera vraiment déposé sur le fichier upload, et vous pourrez faire en sorte que le div ressemble à ce que vous voulez.

Vous pouvez essayer AngularJS.ngUpload .

C’est une solution sans HTML5 qui utilise un iFrame invisible pour le téléchargement de fichiers. Comme il ne repose pas sur HTML5, il fonctionne sur tous les navigateurs!

Exemple de code:

 
    
 
{{uploadReport}} 

Tout élément html qui prend en charge un événement click peut être utilisé pour soumettre un formulaire marqué avec la directive ngUpload, mais uniquement que ces éléments doivent être marqués avec la classe css upload-submit (comme dans le cas de l’entrée [type = submit] ci-dessus.

L’exemple ci-dessous utilise un div stylé pour soumettre le formulaire.

 
   
Submit
 
 
{{uploadReport}} 

Vous pouvez faire en sorte que votre / server / upload / handler crache une URL valide, de sorte que {{uploadReport}} puisse être utilisé pour définir le src d’une balise , comme ceci:

et voir l’image téléchargée apparaître immédiatement!

Le ngController pour les exemples ci-dessus est:

 var UploadCtrl = function ($scope) { $scope.callbackFunction = function(contentOfInvisibleFrame) { $scope.uploadReport = contentOfInvisibleFrame; } } 

La directive ngUpload peut être enregistrée avec votre module d’application AngularJS à savoir:

 var mainApp = angular.module('MainApp', ["ngUpload", ...]); 

et ajouté à votre document comme:

AngularJS.ngUpload fonctionne dans le contexte d’un ngController; et tel que vous pouvez avoir autant d’uploaders que possible dans un seul ngController. Par exemple:

 
    
 Server response: {{uploadReport1}} 
    
 Server response: {{uploadReport2}} 

être servi par:

 var UploadCtrl = function ($scope) { $scope.callbackFunction1 = function(contentOfInvisibleFrame) { $scope.uploadReport1 = contentOfInvisibleFrame; } $scope.callbackFunction2 = function(contentOfInvisibleFrame) { $scope.uploadReport2 = contentOfInvisibleFrame; } } 

Une démo de gestionnaire de téléchargement basée sur NodeJS de cette directive est disponible à l’ adresse http://ng-upload.eu01.aws.af.cm .

Vous trouverez des exemples de codes ASP.Net MVC et NodeJS sur le site Web du projet à l’adresse github.com/twilson63/ngUpload/tree/master/examples

J’espère que cela t’aides.

J’ai mis au point une directive angular simple / légère avec polyfill pour les navigateurs ne prenant pas en charge HTML5 FormData ici:

https://github.com/danialfarid/ng-file-upload

Vous pouvez envoyer un autre object de modèle avec le fichier au serveur. Voici la page de démonstration:

http://angular-file-upload.appspot.com/

manette:

 Upload.upload({ url: 'my/upload/url', data: {myObj: $scope.myModelObj}, file: $scope.files }).then(function(data, status, headers, config) { // file is uploaded successfully console.log(data); }); 

Si vous voulez gérer plusieurs fichiers, essayez ceci

jQuery File Upload Angularjs wrap de l’auteur original (blueimp)

Je pense que c’est le téléchargeur le plus puissant à ce jour.

J’ai récemment écrit une directive qui prend en charge les téléchargements de fichiers multiples natifs.

Exemple d’utilisation:

Vous pouvez trouver le code sur github , et la documentation sur mon blog