How To Upload Multiple Files(each File Contains Max 1 File) On Clicking On Submit Button?

Hi i am developing file upload module using Angularjs and api. I am following https://jsfiddle.net/JeJenny/vtqavfhf/. I have one list which contains document names such as passport

Solution 1:

Here is a working example, hope it helps

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

myApp.directive('fileModel', ['fileUpload', function(fileUpload) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      element.bind("change", function(evt) {
        fileUpload.pendingFiles[attrs.fileModel] = evt.target.files[0];
      });
    }
  };
}]);

myApp.factory('fileUpload', ['$http', function($http) {

  var service = {
    uploadUrl: "https://httpbin.org/post",
    pendingFiles: [],
    doUpload: doUpload
  };

  return service;

  functiondoUpload() {
    var files = newFormData();
    angular.forEach(this.pendingFiles, function(value, key) {
      files.append('file', value);
    });

    return $http.post(this.uploadUrl, files, {
      transformRequest: angular.identity,
      headers: {
        'Content-Type': undefined
      }
    })
  }
}]);

myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload) {
  $scope.fileInputs = [1, 2, 3];
  $scope.upload = function(filename) {
    fileUpload.doUpload().success(function(success) {
      $scope.result = success
    });
  };
}]);

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><bodyng-app="myApp"><divng-controller="myCtrl"><divng-repeat="fileInput in fileInputs"><inputtype="file"file-data="{{fileInput}}"file-model="{{fileInput}}" /></div><br /><buttonng-click="upload()">upload all</button><br /><pre>{{result | json}}</pre></div></body>

Solution 2:

add multiple attribute to your input tag file <input type="file" multiple> this will allow multiple select of files