intégration d'upload de fichiers pour angularjs

Question

Existe-t-il un bon uploader de fichiers avec une bonne intégration (une directive) pour AngularJS?

Je cherche quelque chose qui soit facile à coiffer et qui supporte HTML5 drag and drop, etc.

Quelqu'un dira probablement qu'il est facile d'utiliser un programme de téléchargement existant et de l'intégrer à AngularJS, ce à quoi je dirai: si c'est facile, quelqu'un aurait déjà dû le faire.

Answer 1

En fait, j'ai roulé ma propre uploader une fois... mais seulement parce que je n'aimais pas l'un de la déjà fait de JQuery. Malheureusement ce n'est propriétaire et je ne peux pas le publier sur internet... mais... je peux vous montrer comment utiliser n'importe quel plugin JQuery Angulaires:

Quelqu'un va sans doute dire que son facile à utiliser un programme de téléchargement et de les intégrer dans AngularJS - ce que je vais dire: si son facile alors quelqu'un aurait déjà fait.

Nous allons supposer que j'ai un plugin jQuery qui fonctionne en sélectionnant un div et en appelant pluginUploadCall() sur...

app.directive('myJqueryPluginUploader', function() {
   return {
      restrict: '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é.

<div my-jquery-plugin-uploader></div>

Angulaire intègre très bien avec jQuery donc tous les plugins qui fonctionnent en jQuery devrait fonctionner assez facilement dans Angulaire. La seule trickiness vient quand vous voulez garder l'Injection de Dépendance en vie, donc vous pouvez garder votre Angulaire Application testable. JQuery n'est pas très bon à la DI, de sorte que vous pouvez avoir à sauter à travers des cerceaux.

Si vous voulais faire rouler votre propre, je peux vous dire que j'ai fait quelque chose comme ceci:

app.directive('customUploader', function(){
    return {
       restrict: 'E',
       scope: {},
       template: '<div class="custom-uploader-container">Drop Files Here<input type="file" class="custom-uploader-input"/><button ng-click="upload()" ng-disabled="notReady">Upload</button></div>',
       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 poster 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 fournir, mais j'espère que ça aide.

EDIT: Le glisser-déposer le fichier de téléchargement est un peu un truc de CSS, BTW... pour google Chrome et FF, ce que vous faire est de mettre la dans un div contenant... de faire quelque chose comme ceci:

<div class="uploadContainer">Drop Files Here<input type="file"/></div>

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 tomber sur cette div sera vraiment être tombé sur l'upload de fichier, et vous pouvez faire la div ressembler à ce que vous voulez.

Answer 2

Vous pouvez donner à AngularJS.ngUpload un essai.

C'est un HTML5-solution gratuite qui utilise une iFrame invisible pour le fichier de téléchargement. Car il ne repose pas sur le HTML5, il fonctionne sur navigateur!

Exemple de code:

<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
<div>{{uploadReport}}</div>

N'importe quel élément html qui prend en charge un événement click peut être utilisé pour présenter une forme marquée avec le ngUpload directive, que ces éléments doivent être marqués avec le téléchargement de la soumettre de classe css (comme le cas avec l'input[type=submit] ci-dessus.

L'exemple ci-dessous utilise un div style de soumettre le formulaire.

<form action='/server/upload/handler' ng-upload="callbackFunction">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <div style="cursor: pointer; padding: 5px" class="upload-submit">Submit</div>
</form>
<div>{{uploadReport}}</div>

Vous pouvez faire de votre /serveur/upload/gestionnaire de cracher une url valide, de sorte que {{uploadReport}} peut être utilisé pour définir la src de la balise <img>, comme ceci:

<img ng-src={{uploadReport}} />

et voir l'image téléchargée apparaissent immédiatement!

Le ngController pour les exemples ci-dessus est:

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

Le ngUpload directive peuvent être enregistrés avec votre AngularJS module d'application, à savoir:

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

et ajouté à votre document:

<html ng-app="MainApp">

</html>

AngularJS.ngUpload fonctionne dans le contexte d'une ngController; et tel, vous pouvez avoir autant de téléchargeurs que possible dans un seul ngController. Par exemple:

<form action='/server/upload/handler' ng-upload="callbackFunction1">
   <!-- other form inputs goes here -->
   <input type="file" name="anyEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport1}}

<form action='/server/upload/handler' ng-upload="callbackFunction2">
   <!-- other form inputs goes here -->
   <input type="file" name="anotherEasyName" />
   <input type="submit" class="upload-submit" value="Submit" />
</form>
Server response: {{uploadReport2}}

pour être desservie par:

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

     $scope.callbackFunction2 = function(contentOfInvisibleFrame) {
         $scope.uploadReport2 = contentOfInvisibleFrame;
     }
}

Un NodeJS à base de télécharger gestionnaire de démonstration de la présente directive peut être trouvé à http://ng-upload.eu01.aws.af.cm.

Un ASP.Net MVC et NodeJS des exemples de codes peuvent être trouvés sur le site web du projet à github.com/twilson63/ngUpload/tree/master/examples

Espérons que cette aide.

Answer 3

J'ai mis en place un simple/lumière angulaire de la directive avec polyfill pour les navigateurs ne supportant HTML5 FormData ici:

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

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

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

<script src="angular.min.js"></script>
<script src="angular-file-upload.js"></script>

<div ng-controller="MyCtrl">
  <input type="text" ng-model="myModelObj">
  <input type="file" ng-file-select="onFileSelect($files)" >
</div>

contrôleur:

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

Answer 4

Si vous voulez gérer plusieurs fichiers, essayez ceci

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

Je pense que c'est l'uploader le plus puissant à ce jour.

Answer 5

J'ai récemment écrit une directive qui prend en charge le téléchargement natif de plusieurs fichiers.

Exemple d'utilisation:

 <lvl-file-upload
    auto-upload='false'
    choose-file-button-text='Choose files'
    upload-file-button-text='Upload files'
    upload-url='http://localhost:3000/files'
    max-files='10'
    max-file-size-mb='5'
    get-additional-data='getData(files)'
    on-done='done(files, data)'
    on-progress='progress(percentDone)'
    on-error='error(files, type, msg)'/>
 

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