Flow.js html5 file upload extension on angular.js framework
12 people use it
Author: 336d2009938a26990af595c647aac1e9 flowjs
Submitted by: 2088484? AidasK

What is ng-flow?

Flow.js extensions for angular.js framework, no 3rd party JS dependencies required!

ng-flow extension is based on Flow.js library.


How can I install it?

1) Get the library:

use bower:

use cdn, look for available packages at!flow

or use git clone

2) Add the module to your app as a dependency:

How can I use it?

First of all wrap places there you are going to use Flow.js html <div ng-flow-init> ... other ng-flow directives goes here ... </div> This directive is going to add $flow variable to current scope. Also this directive can be nested, because $flow variable is going to be overriden. $flow is instance of Flow.

Secondly you need to assign some upload buttons: html <input type="file" ng-flow-btn /> <input type="file" ng-flow-btn ng-directory /> First button is for normal uploads and second is for directory uploads.

Now you need to display uploaded files, this can be done with "ng-flow-transfers" directive. This directive will assign transfers variable to the scope. This variable is a reference to Flow.files array. html <tr ng-repeat="file in transfers"> <td>{{$index+1}}</td> <td>{{}}</td> </tr> file is instance of FlowFile.

How can i drop files?

Use ng-flow-drop directive: html <div class="alert" ng-flow-drop ng-drag-over-class="alert-success"> Drag And Drop your file here </div> You can optionally set class, then file is over the element, with ng-drag-over-class attribute.

How can i preview uploaded image?

Use ng-flow-img directive: html <img ng-flow-img="$flow.files[0]" /> Image will be automatically updated once file is added. No need to start upload.

How can i set options for flow.js?

Use config: javascript var app = angular.module('app', ['ngFlow']) .config(['flowFactoryProvider', function (flowFactoryProvider) { flowFactoryProvider.defaults = { target: '/upload', permanentErrors:[404, 500, 501], minFileSize: 0 }; // You can also set default events: flowFactoryProvider.on('catchAll', function (event) { ... }); // Can be used with different implementations of Flow.js // flowFactoryProvider.factory = fustyFlowFactory; }]);

also can be configured on "ng-flow-init" directive: ````html


How can i catch events?

Events are listed on "ng-flow-init" directive: ````html


How can i support older browsers?

Go to and add to your config: javascript var app = angular.module('app', ['ngFlow']) .config(['flowFactoryProvider', function (flowFactoryProvider) { flowFactoryProvider.factory = fustyFlowFactory; }]);

Need example?

Clone this repository and go to "ng-flow/samples/basic/index.html". Single image upload "ng-flow/samples/image/index.html".


To ensure consistency throughout the source code, keep these rules in mind as you are working:

  • All features or bug fixes must be tested by one or more specs.

  • With the exceptions listed below, we follow the rules contained in Google's JavaScript Style Guide:

    • Wrap all code at 100 characters.
    • Instead of complex inheritance hierarchies, we prefer simple objects. We use prototypical inheritance only when absolutely necessary.
comments powered by Disqus
This page was last updated almost 5 years ago.