Create File Uploader Using AngularJS

Introduction

In this article I will tell you how to create a file uploader using AngularJS.

You might have used a file uploader of ASP.NET, but what about a file uploader in AngularJS? You might have been using AngularJS in your application and if such type of application can be provided then it is just a bonus to us.

For providing this type of functionality Angular uses "angularFileUpload" and $upload.

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 to download it: ANGULARJS.

After downloading the external file you need to add this file to the Head section of your application.

</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.

Now I will work on the JavaScript section of this application.

Write this code in the head section:

angular.module('mod', ['angularFileUpload']);

var x = ['$scope', '$upload', function ($scope, $upload) {

$scope.selectFile = function ($slctfl) {

$upload.upload({

url: 'my/upload/url'

})

}

}];

</script>

Here I have 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 have created a function "x", this function will be bound to the body section using the ng-controller directive. ng-app and ng-directive is among the most important directives when using AngularJS.

In this function I used a variable named "selectFile", in this function the upload directive is used with the property named URL. This URL will follow the path that will be provided by the user.

Just this much code is necessary to do our work of uploading a file for the user. Now we can move to the design part of this application.

Step 3

Write this code in the body section:

<body>

</div>

</form>

</body>

Here I had 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:

file upload using angularJS

If I click on the button then a new window will be opened that will allow me to select a file:

file upload using angularJS

On selecting the file I clicked on the open button and you can see that the file is uploaded:

file upload using angularJS

The complete code of this application is as follows:

angular.module('mod', ['angularFileUpload']);

var x = ['$scope', '$upload', function ($scope, $upload) {

$scope.selectFile = function ($slctfl) {

$upload.upload({

url: 'my/upload/url'

})

}

}];

</script>

</head>

<body>

</div>

</form>

</body>

</html>