Create Multi File Uploader Using AngularJS

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.

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.

Now I will work on the JavaScript for this application.

Now you need to modify your script with this code:

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.