Introduction
In my previous article I explained How to Create File Uploader Using AngularJS.
In this article I will tell you how to create a multiple file uploader using AngularJS.
Previously I showed you an application where I created a file uploder using AngularJS, but using that uploader you can upload only one file, today I am modifying that uploader and making a multiple file uploader.
Step 1
First of all you need to add an external Angular.js file to your application, "angular.min.js".
For this you can go to the AngularJS official site or can download my source code and then fetch it or you can click on this link and to it: ANGULARJS.
After downloading the external file you need to add this file to the Head section of your application.
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
</head>
Step 2
Now after adding the external JS file the first thing you need to do is to add ng-app in the <HTML> Tag otherwise your application will not run.
<html ng-app xmlns="http://www.w3.org/1999/xhtml">
Now I will work on the JavaScript for this application.
Now you need to modify your script with this code:
<script>
angular.module('mod', ['angularFileUpload']);
var x = ['$scope', '$upload', function ($scope, $upload) {
$scope.selectFile = function ($slctfl) {
for (var i = 0; i < $slctfl.length; i++) {
var $fl = $slctfl[i];
$upload.upload({
url: 'my/upload/url',
file: $fl,
progress: function (e) { }
}).then(function (data, status, headers, config) {
console.log(data);
});
}
}
}];
</script>
Here I created angular.Module in which "mod" and "angularFileUpload" are defined, mod is the variable that will help to bind using the ng-app.
After this I created a function "x", this function will be bound to the body section using the ng-controller directive. ng-app and ng-directive are among the most important directives when using AngularJS.
In this function I used a variable named "selectFile", in this function the for loop is executed that will execute until all the selected files are not uploaded, for this to happen the upload directive is used that has three properties named url, file and progress. This URL will follow the path that will be provided by the user.
Step 3
Our work on the JavaScript is completed and we can proceed to the design part of this application.
Write this code in the body section:
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<input type="file" ng-file-select="selectFile($slctfl)" multiple>
</div>
</form>
</body>
Here I bound the Div using the ng-app directive.
In this Div I took an input tag whose type is set to File, this input tag is bound using the ng-file-select Directive to the function "selectFile($slctfl)".
Now our application is created and is ready for execution.
Output
On running the application you will see only a button in the output window:
![multiple file upload using angular]()
If I click on the button then a new window will be opened that will allow me to select multiple files:
![multiple file upload using angular]()
On selecting the files I click on the open button and you can see that a number of files are uploaded and shown as the total number of files:
![multiple file upload using angular]()
The complete code of this application is as follows:
<html ng-app="mod" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="angular.min.js"></script>
<script>
angular.module('mod', ['angularFileUpload']);
var x = ['$scope', '$upload', function ($scope, $upload) {
$scope.selectFile = function ($slctfl) {
for (var i = 0; i < $slctfl.length; i++) {
var $fl = $slctfl[i];
$upload.upload({
url: 'my/upload/url',
file: $fl,
progress: function (e) { }
}).then(function (data, status, headers, config) {
console.log(data);
});
}
}
}];
</script>
</head>
<body>
<form id="form1" runat="server">
<div ng-controller="x">
<input type="file" ng-file-select="selectFile($slctfl)" multiple>
</div>
</form>
</body>
</html>