Introduction

About

Angular File Upload is a module for the AngularJS framework. Supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but degrades to a legacy iframe upload method for older browsers. Works with any server side platform which supports standard HTML form uploads.

When files are selected or dropped into the component, one or more filters are applied. Files which pass all filters are added to the queue. When file is added to the queue, for him is created instance of {FileItem} and uploader options are copied into this object. After, items in the queue (FileItems) are ready for uploading.

OBS

The upload service(back end) must return a json for callbacks to work properly

Requires

• The AngularJS framework
• ES5 (Object.create, Array.prototype.indexOf, Array.prototype.filter, Array.prototype.every, Function.prototype.bind, String.prototype.trim, Date.now) A shim & sham is provided for older browsers.

Includes

Directives

• nvFileSelect. Should be applied to <input type="file" />. The selected files are added to the uploaded queue if they have passed the filters.
• nvFileDrop. Set up a drop area. Usually applied to the entire document. Caught files are added to the uploaded queue if they have passed the filters.
• nvFileOver. Should be applied to the element which will change class when files are about to be placed on the drop area. By default it adds the class nv-file-over but a different class can be specified with the parameter attribute over-class="className".

Services

• FileUploader. Manages the upload queue and the uploading of files.

Usage

Simple use looks like this:

<div ng-app="app">
    <div ng-controller="AppController">
        <input type="file" nv-file-select uploader="uploader"/><br/>
        <ul>
            <li ng-repeat="item in uploader.queue">
                Name: <span ng-bind="item.file.name"></span><br/>
                <button ng-click="item.upload()">upload</button>
            </li>
        </ul>
    </div>
</div>

angular
    .module('app', ['angularFileUpload'])
    .controller('AppController', function($scope, FileUploader) {
        $scope.uploader = new FileUploader();
    });