Showing posts with label html5 file upload extension. Show all posts
Showing posts with label html5 file upload extension. 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
angular-file-upload

angular-file-upload

June 13, 2017
Angular File Upload is a module for the AngularJS framework. Supports drag-n-drop upload, upload progress, validation filters and a file upload queue. It supports native HTML5 uploads, but degrades to a legacy iframe upload method for older browsers. Works with any server side platform which supports standard HTML form uploads.
When files are selected or dropped into the component, one or more filters are applied. Files which pass all filters are added to the queue. When file is added to the queue, for him is created instance of {FileItem} and uploader options are copied into this object. After, items in the queue (FileItems) are ready for uploading.

Package managers

Bower

 bower install angular-file-upload  
You could find this module in bower like angular file upload.

NPM

 npm install angular-file-upload  
You could find this module in npm like angular file upload.

Yarn

 yarn add --exact angular-file-upload  

Module Dependency

Add 'angularFileUpload' to your module declaration:
 var app = angular.module('my-app', [  
   'angularFileUpload'  
 ]);  

Demos

  1. Simple example
  2. Uploads only images (with canvas preview)
  3. Without bootstrap example

More Info

  1. Introduction
  2. Module API
  3. FAQ
  4. Migrate from 0.x.x to 1.x.x
  5. RubyGem

How to ask a question

If you have a question, please, follow next steps:
  • Try to find an answer to your question using search
  • If you have not found an answer, create new issue on issue-tracker

Note: Special thanks to Alex

Contact - nervgh@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.