@flowjs/ng-flow

ng-flow is a Flow.js extensions for angular.js framework, no 3rd party JS dependencies required!
Demo: http://flowjs.github.io/ng-flow/1) Get the library:
Direct Download Download a latest build from https://github.com/flowjs/ng-flow/releases it contains development and minified production files in dist/ directory, they are also concatenated with core flow.js library.
Using Bower

bower install ng-flow#~2
        

Git Clone

git clone https://github.com/flowjs/ng-flow

Using Yeoman

bower install "ng-flow#~2" --save
grunt bower-install
        

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

angular.module('app', ['flow'])

3) Include the files in your project

<!-- concatenated flow.js + ng-flow libraries -->
<script src="ng-flow/dist/ng-flow-standalone.min.js"></script>
<!-- or include the files separately -->
<script src="flow.js/dist/flow.min.js"></script>
<script src="ng-flow/dist/ng-flow.min.js"></script>

First of all wrap places there you are going to use Flow.js ````html ````
This directive is going to add $flow variable to current scope. Also directive can be nested, because $flow variable is going to be overridden. $flow is instance of Flow.
Secondly you need to assign some upload buttons: ````html Input OR Other element as upload button Upload File ````
First button is for normal uploads and second is for directory uploads. Note: avoid using <a> and <button> tags as file upload buttons, use <span> instead.
Now you need to display uploaded files, all you need to do is to loop files array. Files array is attached to flow object named $flow. ````html

<td>{{$index+1}}</td>
<td>{{file.name}}</td>

````
file is instance of FlowFile.

Quick setup

````html ```Clone this repository and go to "ng-flow/samples/basic/index.html". Single image upload "ng-flow/samples/image/index.html".Use flow-drop directive: ````html ``` Note: in most cases flow-drop must be used together with flow-prevent-drop directive on body` element, because it prevents file from being loaded in the browser.

Prevent dropping files on a document

Use flow-prevent-drop directive on body element: ````html
````

How to add some styles while dropping a file?

Use flow-drag-enter directive: ````html ``` Note: flow-drag-leave attribute can't be used alone, it is a part of flow-drag-enter` directive.

How to dynamically disable drop area?

````html ``` See example at samples/dataurl/`.Use flow-img directive: ````html 0" /> ````
Image will be automatically updated once file is added. No need to start upload.Use config: ````javascript var app = angular.module('app', 'flow') .config('flowFactoryProvider', function (flowFactoryProvider) {

flowFactoryProvider.defaults = {
    target: '/upload',
    permanentErrors:[404, 500, 501]
};
// 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 "flow-init" directive: ````html ````Events are listed inside flow-init directive: ````html ````

How can I catch an event in a controller?

If controller is on the same scope as flow-init directive or in a child scope, then we can catch events with $on. Events are prefixed with flow::. ````javascript $scope.$on('flow::fileAdded', function (event, $flow, flowFile) { event.preventDefault();//prevent file from uploading }); ``` second argument is always a flow` instance and then follows event specific arguments.Use flow-name attribute and set it to any variable in the scope. ````html ``` ```javascript $scope.obj = {}; // variable "obj" must be initialized on the scope ````Use flow-object attribute and set it with the existing flow object on scope. ````html ````Go to https://github.com/flowjs/fusty-flow.js and add to your config: ````javascript var app = angular.module('app', 'flow') .config('flowFactoryProvider', function (flowFactoryProvider) {

flowFactoryProvider.factory = fustyFlowFactory;

}); ````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.