Showing posts with label ng-flow. Show all posts
Showing posts with label ng-flow. Show all posts
ng-flow - Flow.js html5 file upload extension on angular.js framework

ng-flow - Flow.js html5 file upload extension on angular.js framework

June 16, 2017
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
 <div flow-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:
 <input type="file" flow-btn />  
 <input type="file" flow-btn flow-directory />  
  Input OR Other element as upload button  
 <span flow-btn>Upload File</span>  
First button is for normal uploads and second is for directory uploads. Note: avoid using and