Categories
Angular AngularJS General JavaScript

Flowjs – Angular HTML5 Uploader

Flow.js is javascript library which is provides multiple simultaneous, stable and resumable uploads via the HTML5 File API. This library allows automatic resume uploading file when internet connection is lost
either locally or to the server. Additionally its provide a facility to pause, resume and recover uploads without losing any data because flow.js upload file in chunks so only currently chuck is aborted not entire upload.

Flow.js does not depends on third party library, its use HTML 5 API. Flow.js have a ability to break / chunks file in smaller pieces, that’s why currently flow.js support is limited to Firefox 4+, Chrome 11+, Safari 6+ and Internet Explorer 10+.

  1. Flow.js is currently available for angular.js (ng-flow)
  2. JQuery and node.js backend (link). 

How to install?

Download latest build from

http:// https://github.com/flowjs/flow.js/releases

or bower :

http://bower install flow.js#~2

or use git clone http://git clone https://github.com/flowjs/flow.js

How to use Flow.js?

var flow = new Flow({
  target:'/api/photo/redeem-upload-token', 
  query:{upload_token:'my_token'}
});
// Flow.js isn't supported, fall back on a different method
if(!flow.support) location.href = '/some-old-crappy-uploader';

User can either selected and drag-dropped, just assign drop target and a DOM item to be clicked for browsing:

flow.assignBrowse(document.getElementById('browseButton'));
flow.assignDrop(document.getElementById('dropTarget'));

After this, interaction with Flow.js is done by listening to events:

flow.on('fileAdded', function(file, event){
    console.log(file, event);
});
flow.on('fileSuccess', function(file,message){
    console.log(file,message);
});
flow.on('fileError', function(file, message){
    console.log(file, message);
});

Read full documentation on below link:

Flow.js : https://flowjs.github.io/ng-flow/

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.