Flow.js html5 file upload extension on angular.js framework

Downloads in past


1,3921572.7.85 years ago7 years agoMinified + gzip package size for @flowjs/ng-flow in KB


ng-flow Build Status Test Coverage
Saucelabs Test Status
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 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>
How can I use it?
First of all wrap places there you are going to use Flow.js ````html
... other flow directives goes here ...
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
file is instance of FlowFile.

Quick setup

flow-files-submitted="$flow.upload()" flow-file-success="$file.msg = $message"> Input OR Other element as upload button Upload File
<tr ng-repeat="file in $flow.files">
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: ````html
Drag And Drop your file here
``` 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?

Drag And Drop your file here
``` See example at samples/dataurl/`.
How can I preview uploaded image?
Use flow-img directive: ````html 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', '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

How can I catch events?
Events are listed inside flow-init directive: ````html
flow-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=" ... " > <div flow-file-progress=" ... events can be also assigned inside flow-init ... "></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::. ````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.
How can I assign flow to a parent scope?
Use flow-name attribute and set it to any variable in the scope. ````html
... Flow is set to obj.flow  ...
I have uploaded files: #{{obj.flow.files.length}}
``` ```javascript $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. ````html
... 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 }}.
How can I support older browsers?
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.

Wrap all code at 100 characters.
Instead of complex inheritance hierarchies, we prefer simple objects. We use prototypical inheritance only when absolutely necessary.