CODEWITHSUNDEEP
javascriptangularjs
Niranjan Godbole
Niranjan Godbole

Reputation: 2175

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,visa etc and so on. I am binding this list to array and looping inside ng-repeat. So based on the number of documents it generates file upload controls as below. 

<div class="upload-button" ng-repeat="file in files">
                <div class="upload-button-icon">
                    <img src="images/folder-small.png">
                    <div class="upload-text">{{file}}</div>
                    <input type="file" id="file1" name="file1" file-model="{{file}}"  />
                </div>
</div>

Note: we can upload obly one document on one upload. So clearly if i have 4 documents in files array then 4 file upload controls will generate.

Finally i have one button which should save all the above files on click. 

   <input type="submit" value="{{ 'NEXT' | translate }}" class="blue-button" ng-click="uploadFile(files)">

I have this function to save file(Taken from fiddler)

$scope.uploadFile = function(filename){
       //Here i want to save all the files. For example if there are three documents in array files then 3 documents at a time i want to send it to server.
    };

As you can see, fiddler will be having separate functions to save each file individually. I am trying to send all the files at a time.

May i get some help here? I am not sure what should be written inside $scope.uploadFile function? How can i collect here all files data? Thank you.

Upvotes: 1

Views: 1262

Answers (2)

IamSilviu
IamSilviu

Reputation: 232

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;

  function doUpload() {
    var files = new FormData();
    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
    });
  };
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="myApp">
  <div ng-controller="myCtrl">
    <div ng-repeat="fileInput in fileInputs">
      <input type="file" file-data="{{fileInput}}" file-model="{{fileInput}}" />
    </div>
    <br />
    <button ng-click="upload()">upload all</button>
  <br />
    <pre>{{result | json}}</pre>
  </div>
</body>

Upvotes: 1

perseusl
perseusl

Reputation: 348

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

Upvotes: 0

Related Questions