Upload multiple files in angular
Here is file value binding directive example ..
http://plnkr.co/edit/B13t84j5IPzINMh1F862?p=preview
Js code is:
var app = angular.module('myApp', []);app.controller('MainCtrl', function($scope) { $scope.name = 'World'; $scope.files = []; $scope.upload=function(){ alert($scope.files.length+" files selected ... Write your Upload Code"); };});app.directive('ngFileModel', ['$parse', function ($parse) { return { restrict: 'A', link: function (scope, element, attrs) { var model = $parse(attrs.ngFileModel); var isMultiple = attrs.multiple; var modelSetter = model.assign; element.bind('change', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = { // File Name name: item.name, //File Size size: item.size, //File URL to view url: URL.createObjectURL(item), // File Input Value _file: item }; values.push(value); }); scope.$apply(function () { if (isMultiple) { modelSetter(scope, values); } else { modelSetter(scope, values[0]); } }); }); } };}]);Html Code is:
<!DOCTYPE html><html ng-app="myApp"> <head> <meta charset="utf-8" /> <title>AngularJS Plunker</title> <script>document.write('<base href="' + document.location + '" />');</script> <link href="style.css" rel="stylesheet" /> <script data-semver="1.4.3" src="https://code.angularjs.org/1.4.3/angular.js" data-require="angular.js@1.4.x"></script> <script src="app.js"></script> </head> <body ng-controller="MainCtrl"> <p>Hello {{name}}!</p> <input type="file" ng-file-model="files" multiple /> <button type="button" ng-click="upload()">Upload</button> <p ng-repeat="file in files"> {{file.name}} </p> </body></html>
If you don't care about browsers less than IE 9. Then you can follow this post and construct a FormData object in your ng-submit event. This will create a form/multipart and might not be what your looking for but it does the trick.
from saltuk's answer above there is a small change for the code to work
var modelSetter = model.assign; element.bind('change', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = {... } } }the array var should be defined above before forEach function
var modelSetter = model.assign; element.bind('change', function () { var values = []; angular.forEach(element[0].files, function (item) { var value = {... } } }