ng-flow

View angular2+ repo at https://github.com/flowjs/ngx-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/

How can I install it?

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 NPM

 npm install @flowjs/ng-flow --save

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 --><scriptsrc="ng-flow/dist/ng-flow-standalone.min.js"></script><!-- or include the files separately --><scriptsrc="flow.js/dist/flow.min.js"></script><scriptsrc="ng-flow/dist/ng-flow.min.js"></script>

How can I use it?

First of all wrap places there you are going to use Flow.js

<divflow-init>
... other flow directives goes here ...
</div>

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:

<inputtype="file" flow-btn/><inputtype="file" flow-btnflow-directory/>
Input OR Other element as upload button
<spanflow-btn>Upload File</span>

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.

<trng-repeat="file in $flow.files"><td>{{$index+1}}</td><td>{{file.name}}</td></tr>

file is instance of FlowFile.

Quick setup

<divflow-init="{target: '/upload'}"
flow-files-submitted="$flow.upload()"
flow-file-success="$file.msg = $message"><inputtype="file" flow-btn/>
Input OR Other element as upload button
<spanclass="btn" flow-btn>Upload File</span><table><trng-repeat="file in $flow.files"><td>{{$index+1}}</td><td>{{file.name}}</td><td>{{file.msg}}</td></tr></table></div>

Need more examples?

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

How can I drop files?

Use flow-drop directive:

<divclass="alert" flow-drop>
Drag And Drop your file here
</div>

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:

<bodyflow-prevent-drop></body>

How to add some styles while dropping a file?

Use flow-drag-enter directive:

<divflow-drag-enter="style={border:'4px solid green'}" flow-drag-leave="style={}"
ng-style="style"></div>

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?

<divclass="alert" flow-dropflow-drop-enabled="config.enabled">
Drag And Drop your file here
</div>

See example at samples/dataurl/.

How can I preview uploaded image?

Use flow-img directive:

<imgflow-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:

varapp=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:

<divflow-init="{target:'/uploader'}"></div>

How can I catch events?

Events are listed inside flow-init directive:

<divflow-initflow-file-success="someHandlerMethod( $file, $message, $flow )"
flow-file-progress="someHandlerMethod( $file, $flow )"
flow-file-added="someHandlerMethod( $file, $event, $flow )"
flow-files-added="someHandlerMethod( $files, $event, $flow )"
flow-files-submitted="someHandlerMethod( $files, $event, $flow )"
flow-file-retry="someHandlerMethod( $file, $flow )"
flow-file-error="someHandlerMethod( $file, $message, $flow )"
flow-error="someHandlerMethod( $file, $message, $flow )"
flow-complete=" ... "
flow-upload-started=" ... "
flow-progress=" ... "
><divflow-file-progress=" ... events can be also assigned inside flow-init ... "></div></div>

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::.

$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.

How can I assign flow to a parent scope?

Use flow-name attribute and set it to any variable in the scope.

<divflow-initflow-name="obj.flow">
... Flow is set to obj.flow ...
I have uploaded files: #{{obj.flow.files.length}}
</div>

$scope.obj={};// variable "obj" must be initialized on the scope

How can I initialize flow with an existing flow object ?

Use flow-object attribute and set it with the existing flow object on scope.

<divflow-initflow-object="existingFlowObject">
... Flow is initialized with existingFlowObject, no new Flow object is created ...
There are already {{ existingFLowObject.files.length }} files uploaded,
which is equal to {{ $flow.files.length }}.
</div>

How can I support older browsers?

Go to https://github.com/flowjs/fusty-flow.js and add to your config:

varapp=angular.module('app',['flow']).config(['flowFactoryProvider',function(flowFactoryProvider){flowFactoryProvider.factory=fustyFlowFactory;}]);

Contribution

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.