Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Flow.js html5 file upload extension on angular.js framework
https://github.com/flowjs/ng-flow

Last synced: 11 days ago
JSON representation

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

Awesome Lists containing this project

README 

        
# ng-flow [![Build Status](https://travis-ci.org/flowjs/ng-flow.svg)](https://travis-ci.org/flowjs/ng-flow) [![Test Coverage](https://codeclimate.com/github/flowjs/ng-flow/badges/coverage.svg)](https://codeclimate.com/github/flowjs/ng-flow/coverage)



[![Saucelabs Test Status](https://saucelabs.com/browser-matrix/ng-flow.svg)](https://saucelabs.com/u/ng-flow)



View angular2+ repo at https://github.com/flowjs/ngx-flow



ng-flow is a [Flow.js](https://github.com/flowjs/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

```html



```



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](https://github.com/flowjs/flow.js#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 `` and `` tags as file upload buttons, use `` 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



    {{$index+1}}

    {{file.name}}



````



file is instance of [FlowFile](https://github.com/flowjs/flow.js#flowfile).



### Quick setup

````html




  

  Input OR Other element as upload button

  Upload File



  

    

        {{$index+1}}

        {{file.name}}

        {{file.msg}}

    

  



````



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?

````html



    Drag And Drop your file here



````

See example at `samples/dataurl/`.



How can I preview uploaded image?

============



Use flow-img directive:

````html



````



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



      





````



### 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;

}]);

````



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](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml):



  * Wrap all code at 100 characters.



  * Instead of complex inheritance hierarchies, we prefer simple objects. We use prototypical

inheritance only when absolutely necessary.