Jquery file upload angular version - multiple file upload on the same page

Not sure how to fix this but angular-file-upload directive might save you the hassle. It is lightweight and simple to use and it supports non-HTML5 browsers with FileAPI flash shim. It also supports drag&drop and upload progress.

<div ng-controller="MyCtrl">
  <input type="file" ng-file-select="onFileSelect($files)" multiple>
  <div class="drop-box" ng-file-drop="onFileSelect($files);" ng-show="ddSupported">drop files here</div>
  <div ng-file-drop-available="dropSupported=true" ng-show="!ddSupported">HTML5 Drop File is not suported></div>

JS:

//inject angular file upload directive.
angular.module('myApp', ['angularFileUpload']);

var MyCtrl = [ '$scope', '$upload', function($scope, $upload) {
  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var $file = $files[i];
      $upload.upload({
        url: 'my/upload/url',
        file: $file,
        progress: function(e){}
      }).then(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      }); 
    }
  }
}];

I had simmilar problems and was not able to find ANY exaple how to use more input fields at once, so I toyed with and after some quite loooong time experimenting with it, i finaly found a really easy solution:

• you just need separate controller for each of the input fields and in (for) each of those you need to specify its drop zone... for example like this:

  < form ng-controller="MyVideoUploadController">< div id="videoFilesInputZone" >< /div >< /form >

  < form ng-controller="MyAudioUploadController">< div id="audioFilesInputZone" >< /div >< /form >

  .controller('MyVideoUploadController', [
  '$scope', '$http', '$filter', '$window',
  function ($scope) {
      $scope.options = {
          dropZone: $("#videoFilesInputZone")
      };
      $scope.loadingFiles = true;
  }]).controller('MyAudioUploadController', [
  '$scope', '$http', '$filter', '$window',
  function ($scope) {
      $scope.options = {
          dropZone: $("#audioFilesInputZone")
      };
      $scope.loadingFiles = true;
  }
  

  ])

and thats all you need. Only drawback is that you can not drop the files just anywhere, but must drop them exactly over the selected elements...