Amid the COVID-19 outbreak, Folio3 aims to help clinics serve patients with telemedicine effectively.

AngularJS File Upload Example & Tutorial

AngularJS File Upload Example & Tutorial
COMMENTS (0)
Tweet

Hi guys,

In the previous post we have learned How to create a Grid with Paging,Sorting,Filtering.

In this post I’ll show you how to upload a file in AngularJS. For this tutorial, we’ll create a simple form that has a file upload field, which binds with a controller to get the data from the form. In AngularJS, $scope is an object that provides two way binding between a view and a controller, which means that any value changes at the controller level will also reflect in the view and vice versa. However, this binding won’t work in the case of a file field.

This is the only tricky part when uploading files in AngularJS, the rest of it is the essentially the same flow you’ll find in other programming languages. We’ll handle this particular limitation by creating a custom directive. The controller will then call the service, which will send the file to the server.

To see a video demo of this tutorial check out the link below. You can also download the source code for this tutorial from this link.

View Live Demo

Let’s get started.

STEP 1: SETUP THE PROJECT STRUCTURE

Here’s the demo project structure you’ll need to setup for this tutorial. This is based on John Papa’s Angular JS app structure guidelines. Check out the link below for more details on these guidelines. http://www.johnpapa.net/angular-app-structuring-guidelines/

1. App

  • app.module.js
  • controllers.js
  • directives.js
  • services.js
  • index.html

2. Scripts

  • angular.min.js

Given below is a screenshot of the project structure. This is what you’ll see if you’ve executed the above step correctly.

angularjs

STEP 2: SETUP APPLICATION (app/app.module.js)

Since Angular JS applications are initialized using modules, so we’ll define a module here with the name ‘app’ using the angular.module function (as depicted below).

 

STEP 3: SETUP VIEW (app/index.html)

Next we need to setup the view. A simple form is required for this step, so we’ll define it in our index.html file, as shown in code snippet below.

 

STEP 4: SETUP DIRECTIVE (app/directive.js)

As you might know, the ngModel directive does not provide two way binding in case of a file field. For example, if you define ng-model = “demoFile” in file field in your index.html file and try to get its value using $scope.demoFile in the FileUploadController, the value will be returned as ‘undefined’. To counter this limitation, we’ll create the following custom directive to provide this missing binding (as shown below).

 

STEP 5: SETUP CONTROLLER (app/controllers.js)

Next we’ll need to setup the controller, since in Angular JS controllers are used to communicate with the views. In the code snippet below, the FileUploadController defines the handler for the click event of the File Upload button. It passes URL and the file to the service and displays the respective success or error message in the view. The API I’ve used here is written in PHP, which simply returns a success or failure message depending on whether the file was received or not.

 

STEP 6: SETUP THE SERVICE (app/services.js)

Since Angular JS services are standalone services, they can be accessed throughout the application. You can use them by adding them as a dependency in Angular JS components like controllers, directives or other services. In this case, we’ll just define a service which will add a file in the FormData object and use the Angular JS $http service to send it to the server, as shown in the code snippet below.

 

CONCLUSION

And’s that it. If you completed the above tutorial successfully, you have learned how to upload a file in Angular JS, by using a custom directive that makes the value of file field in the controller accessible, and then using a controller to call an Angular JS service to send it to the server.

Hope you found it useful.

 

 

 

CALL

USA408 365 4638

VISIT

1301 Shoreway Road, Suite 160,

Belmont, CA 94002

Latest From Our Blog

Why the Daily Scrum is NOT a Status Meeting?

February 3, 2020
I am here today to debunk, The Myth “The Daily Scrum is the Status Meeting”. This is a key misconception in the industry and often resu...
Read more

A Complete Guide to Custom Caching in Magento 2...

November 29, 2019
In this blog, I will explain how to create your own cache in Magento 2, and how to read and write data from that custom cache. I hope after reading...
Read more

React Hooks

September 3, 2019
React is a javascript framework for building interactive client side interfaces along with the integration with back-end server. React considers th...
Read more