Implement uploads with Angular

The project angular-file-upload (see provides a module for Angular that supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but also degrades to a legacy iframe upload method for older browsers.

In this tip, we will describe here how to configure and use it within an Angular application.

Adding the fileupload library to your application

To add the library to our application, we can get the js file from the corresponding github project. We can also Bower and configure it as a dependency as described below:

    "name": "my app",
    "version": "1.0.0",
    "dependencies": {
        "angular-file-upload": "1.1.1",

Now the library is correctly configured within our application, lets start to use it within an Angular controller.

Creating the upload controller

With Angular, the controller implements the processing of the application. In our case, it corresponds to both the initialization of the uploader and its use to actually do the upload.

The initialization consiste in instantiating the object FileUploader with a set of properties to initialize it behavior:

  • Disable auto upload after selecting a file
  • Enable only one file for upload
  • Hide the upload progress area after upload completed

The object FileUploader can be gotten using Angular injection since the library provides it as an Angular service. Following code describes how to configure the uploader within a controller:

            .controller('Uploadl', function ($scope, FileUploader) {
    $scope.uploader = new FileUploader({
        removeAfterUpload: true,
        autoUpload: false,
        withCredentials: true,
        queueLimit: 1

We can notice that keeping default configuration corresponds to:

  • Support several uploads
  • Automatically upload files right after selecting them
  • Always keep the upload progress area visible

Now the uploader is initialized, we need to provide à js function to trigger the upload processing. We can notice that its only required when the automatical uploading is disabled. Following code describes how to que the method uploadAll to implement this:

$scope.upload = function () {

Now we have the global canvas implemented, lets go further to bring more robustness by handling errors and upload lifecycle.

Manage uploading progress and handle error

The fileupload library provides a set of callbacks to add processing along the upload lifecycle:

  • Function onAfterAddingFile: this function is called right after a file is selected.
  • Function onBeforeUploadItem: this function is called right before the file uploading starts. It allows to specify configuration and properties necessary for the upload. A object fileItem is provided to the callback for this purpose.
  • Function onSuccessItem: this function is called if the file upload succeeds.
  • Function onErrorItem: this function is called if the file upload fails.

Folowing code describes how to leverage the lifecycle methods of the instance uploader to handle progress and manage errors:

$scope.uploader.onBeforeUploadItem = function (fileItem) {
    $scope.uploadError = null;
    fileItem.url = '/myuploadurl';

$scope.uploader.onAfterAddingFile = function () {
    $scope.uploadError = null;

$scope.uploader.onErrorItem = function (fileItem) {
    $scope.uploadError = 'Error when uploading the file '+ + '.';

$scope.uploader.onSuccessItem = function () {
    // Example: close the current model dialog when the upload succeeds
    // Example: reload the current screen (using route) when the upload succeeds

In the UI, we could perhaps have to know if an upload is in progress. The function isUploading provides the hint based on the uploader instance and also using lodash function isEmpty.

$scope.isUploading = function () {
    return !_.isEmpty($scope.uploader.queue);

Now we have aller the processing implemented within a controller, its time to tackle the view and link it with this controller.

Create the view

In the view, adding an upload feature corresponds to define an input field with type file. Since the fileuploader library will enrich this input (directive approach), some additional attributes need to be added.

  • Attribute nv-file-select: use it if selecting file are done using a file browser dialog
  • Attribute nv-file-over: use it if selecting file are done using file dragn drop
  • Attribute uploader: references the instance uploader previously configured in the controller

Following code describes how to implement a form within the view that provides upload:

<form class="form-horizontal"
          name="uploadForm" role="form"

    <div style="text-align:center">
        <field label="Schema File">
            <input type="file"
                   class="btn btn-group btn-input clearfix"

    <div class="alert alert-danger" ng-show="uploadError!=null">{{uploadError}}</div>
    <div class="col-xs-12">
        <button class="btn btn-default" ng-click="cancel()">Cancel</button>
        <button class="btn btn-primary" ng-click="upload()"

We can notice the area to display errors that can occur during upload and the button to trigger upload.

This entry was posted in Angular, Tips and tagged , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s