@flowjs/ng-flow
Advanced tools
ng-flow is a Flow.js extensions for angular.js framework, no 3rd party JS dependencies required!
Demo: http://flowjs.github.io/ng-flow/
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>
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 <a> and <button> tags as file upload buttons, use <span> 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.
<tr ng-repeat="file in $flow.files">
<td>{{$index+1}}</td>
<td>{{file.name}}</td>
</tr>
file is instance of FlowFile.
<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:
````html
<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.
Use flow-prevent-drop directive on body element:
<body flow-prevent-drop>
</body>
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.
<div class="alert" flow-drop flow-drop-enabled="config.enabled">
Drag And Drop your file here
</div>
See example at samples/dataurl/.
Use flow-img directive:
<img flow-img="$flow.files[0]" />
Image will be automatically updated once file is added. No need to start upload.
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>
Events are listed inside flow-init directive:
<div flow-init
flow-file-success="someHandlerMethod( $file, $message, $flow )"
flow-file-progress="someHandlerMethod( $file, $flow )"
flow-file-added="someHandlerMethod( $file, $event, $flow )"
flow-files-added="someHandlerMethod( $files, $event, $flow )"
flow-files-submitted="someHandlerMethod( $files, $event, $flow )"
flow-file-retry="someHandlerMethod( $file, $flow )"
flow-file-error="someHandlerMethod( $file, $message, $flow )"
flow-error="someHandlerMethod( $file, $message, $flow )"
flow-complete=" ... "
flow-upload-started=" ... "
flow-progress=" ... "
>
<div flow-file-progress=" ... events can be also assigned inside flow-init ... "></div>
</div>
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.
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>
$scope.obj = {}; // variable "obj" must be initialized on the scope
Use flow-object attribute and set it with the existing flow object on scope.
<div flow-init flow-object="existingFlowObject">
... 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 }}.
</div>
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;
}]);
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:
Wrap all code at 100 characters.
Instead of complex inheritance hierarchies, we prefer simple objects. We use prototypical inheritance only when absolutely necessary.
FAQs
Flow.js html5 file upload extension on angular.js framework
We found that @flowjs/ng-flow demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
GitHub postponed a new billing model for self-hosted Actions after developer pushback, but moved forward with hosted runner price cuts on January 1.
Research
Destructive malware is rising across open source registries, using delays and kill switches to wipe code, break builds, and disrupt CI/CD.
Security News
Socket CTO Ahmad Nassri shares practical AI coding techniques, tools, and team workflows, plus what still feels noisy and why shipping remains human-led.