Ads

Sunday, 20 July 2014

Flow.Js – Angular HTML5 file upload with Multiple Simultaneous, Stable and Resumable Uploads

Download   Demo


Flow.js is a JavaScript library providing multiple simultaneous, stable and resumable uploads via the HTML5 File API. Library does not require third party dependencies.


Features:

Pause/Resume upload

Recover lost upload

Error handling

Drag and Drop with folder reader

Drop area animation

Custom upload buttons

Folder Upload

Queue management

Image preview

File validation

Upload progress

Chunk uploads


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'])

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 $flowvariable 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 />


First button is for normal uploads and second is for directory uploads.


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.



<tr ng-repeat="file in $flow.files">
<td>$index+1</td>
<td>file.name</td>
</tr>


file is instance of FlowFile.


Quick setup



<div flow-init="target: '/upload'"
flow-files-submitted="$flow.upload()"
flow-file-success="$file.msg = $message">

<input type="file" flow-btn/>
Input OR Other element as upload button
<span class="btn" flow-btn>Upload File</span>

<table>
<tr ng-repeat="file in $flow.files">
<td>$index+1</td>
<td>file.name</td>
<td>file.msg</td>
</tr>
</table>
</div>


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:



<div class="alert" flow-drop>
Drag And Drop your file here
</div>


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:



<body flow-prevent-drop>

</body>


How to add some styles while dropping a file?


Use flow-drag-enter directive:



<div flow-drag-enter="style=border:'4px solid green'" flow-drag-leave="style="
ng-style="style">
</div>


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?



<div class="alert" flow-drop flow-drop-enabled="config.enabled">
Drag And Drop your file here
</div>


See example at samples/dataurl/.


How can I preview uploaded image?


Use flow-img directive:



<img flow-img="$flow.files[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:



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:



<div flow-init="target:'/uploader'">

</div>


How can I catch events?


Events are listed inside flow-init directive:



<div flow-init
flow-file-success=" ... properties '$file', '$message' can be accessed ... "
flow-file-progress=" ... property '$file' can be accessed ... "
flow-file-added=" ... properties '$file', '$event' can be accessed ... "
flow-files-added=" ... properties '$files', '$event' can be accessed ... "
flow-files-submitted=" ... properties '$files', '$event' can be accessed ... "
flow-file-retry=" ... property '$file' can be accessed ... "
flow-file-error=" ... properties '$file', '$message' can be accessed ... "
flow-error=" ... properties '$file', '$message' can be accessed ... "
flow-complete=" ... "
flow-upload-started=" ... "
flow-progress=" ... "
>
<div flow-file-progress=" ... events can be also assigned inside flow-init ... "></div>

</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::.



$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.



<div flow-init flow-name="obj.flow">
... Flow is set to obj.flow ...
I have uploaded files: #obj.flow.files.length
</div>


How can I support older browsers?


Go to https://github.com/flowjs/fusty-flow.js and add to your config:



var app = angular.module('app', ['flow'])
.config(['flowFactoryProvider', function (flowFactoryProvider)
flowFactoryProvider.factory = fustyFlowFactory;
]);


 



Flow.Js – Angular HTML5 file upload with Multiple Simultaneous, Stable and Resumable Uploads

3 comments:

  1. This comment has been removed by the author.

    ReplyDelete
  2. Checkout Great beginning php tutorials Very clear and helpful for beginners.

    ReplyDelete
  3. This is literally copy/pasted from their github page: https://github.com/flowjs/ng-flow/blob/master/README.md

    ReplyDelete