uploading multiple files with angularjs

Question

i want to upload multiple files using angular js, but it is like limited number of files and each with specific validation, hence cant use "multiple". Using multiple controls one for each file..

below is the sample code

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.filelist = ['file1','file2']

});

app.directive("fileBind", function() {
  return function( scope, elm, attrs ) {
    elm.bind("change", function( evt ) {
      scope.$apply(function() {
        scope[ attrs.fileBind ] = evt.target.files;
      });
    });
  };
});

the corrposponding html is:

 <div ng-controller="MainCtrl">

      <div ng-repeat="myfile in filelist">
        <input type="file" file-bind="files" />
      </div>

      <div ng-repeat="file in files">
        <pre>{{ file | json }}</pre>
      </div>

    </div>

I have also made a plunker for it: http://plnkr.co/edit/DF2WYU

but this is not working... if i use $index or anything to store all the files uploaded, the directive stops working...

any help is appriciated

Solution 1

Not sure where the problem is but I have put together a simple/light angular directive with polyfill for browsers not supporting HTML5 FormData here:

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

It is very similar to what you do here using a directive listening to change event. Then you can call added prototype to $http "uploadFile" to upload that file to the server via ajax. For IE it would load up a flash file to simulate the same thing.

Here is the working demo: 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>

controller:

$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);
  }); 

Solution 2

I'm not sure about your intention looking the code (sorry not much time...) anyway a single html tag input-file can contain a list of files,see https://developer.mozilla.org/en-US/docs/Web/API/FileList

Given that you can try with this answer appending more files to the FormData