Lightweight Angularjs directive allowing to upload files.
Parameters :
zlf-tois the url for the uploadzlf-max-filesif set, allow to upload x files maximum. The limit by default is 1 file maxzlf-max-size-mbif set, provide a limit of size to the files accepted (in MB)zlf-acceptif set, allow to filter files extensionszlf-dragndropadd the possibily to drag'n'drop files in a divzlf-autosubmitauto submit files
Here an example on how to use a simple fileupload :
<zl-upload to="your-server-url" zlf-dragndrop zlf-max-files="2" zlf-max-size-mb="1" zlf-autosubmit></zl-upload>
var express = require('express'),
cors = require('cors'),
port = process.env.PORT || 3000,
app = express();
var options = {
origin: true,
methods: ['POST']
};
app.options('/upload', cors(options));
app.post('/upload', cors(options), function(req, res){
res.json({
file: 'success !'
});
});
<html ng-app="demo">
<head>
<!-- file upload stylesheet -->
<link href=../bower_components/zl-upload/style.min.js' rel='stylesheet' type='text/css'>
</head>
<body>
<!-- your custom container -->
<div class="container">
<!-- custom upload directive -->
<zl-upload to="upload.php" dragndrop multiple></zl-upload>
</div>
<!-- dependencies -->
<script src="../bower_components/angular/angular.js"></script>
<script src="../bower_components/lodash/lodash.js"></script>
<!-- library to add -->
<script src="../bower_components/zl-upload/zl-upload.js"></script>
<!-- add 90Tech.zlUpload to your app -->
<script>
var demo = angular.module("demo",['90Tech.zlUpload']);
</script>
TODO :
- todo.md
- files extensions, still not implemented in drag & drop
- truncate filename on progressbar
- create bower package