uploadk
v1.0.0
Published
AngularJS (1.x) plugin, upload files, make canvas, drag & drop, no need jquery
Downloads
2
Maintainers
Readme
uploadk
AngularJS (1.x) plugin, upload files, make canvas, drag & drop, no need jquery
Install
npm install uploadk
How to use ?
- Add to your module dependency
var app = angular.module('myApp', ['uploadk'])
- Markup your DOM element
<div catch-files on-drop="callback" catch-options="options">
- Inject factories : fileReader, fileUploader and canvas to your controller, then do your business on files catched by the directive
FilesCatch Directive attributes
- files-catch / on-drop They both do the same action, its a matter of choice, evaluate your $scope properties to find the matching callback function
controller :
$scope.dropCallback = function(files) { //do business };
html :
<div catch-files on-drop="dropCallback"></div>
on-drag-enter / on-drag-leave same syntax
catch-if This attributes will evaluate your expression, if your expression is equivalent to undefined or false, the directive will be inactive.
<div catch-files="dropCallback" catch-if="user"></div>
catch-options the directive will extend its default options to your own, you can override each options properties (see below)
controller:
$scope.options = {
multiple = false;
};
html :
<div catch-files="dropCallback catch-options="options"></div>
FilesCatch options
multiple (default:true) if set to false, the directive will only provide the first file catched to your callback function
drag (default:true) define if the drag & drop feature is active or not
click (default:false) define if the click feature is active or not (will create an hidden input and pop a file window on the click event)
Factories
fileReader
fileReader.readAsDataURL(file, scope);
canvas
canvas.make(dataUrl, height);
fileUploader
fileUploader.post(files, [method])
.to(url, headers)
.then(function (success){
}, function (err){
}, function (notify){
});
example :
angular app :
var app = angular.module('myApp', ['uploadk'])
.controller('MainCtrl', ['$scope', '$rootScope', 'fileReader', 'canvas', 'fileUploader',
function ($scope, $rootScope, fileReader, canvas, fileUploader) {
$scope.canUpload = true;
$scope.options = {
drag:true,
click:true,
};
var token = "123";
var droppedFiles = [];
$scope.images = [];
$scope.dropCallback = function(files) {
for (var i = 0; l = files.length, i < l; ++i) {
droppedFiles.push(files[i]);
fileReader.readAsDataUrl(files[i], $scope).then(function (result)
{
canvas.make(result, 400).then(function (src){
var image = {src:src};
$scope.images.unshift(image);
});
});
}
};
$scope.upload = function() {
var headers = {
"auth-token": token
};
var url = 'http://google.fr';
/* change url and use with a server side application, have fun */
fileUploader.post(droppedFiles)
.to(url, headers)
.then(function (success){
$scope.success = success;
}, function (error){
$scope.error = error;
}, function (notify){
$scope.prct = notify.prct;
});
};
}]);
html :
<div class="dropfile" catch-files on-drop="dropCallback" catch-options="options" catch-if="canUpload">
<div>Drag & Drop </br>Or click</div>
</div>
<img data-ng-repeat="image in images" src="{{image.src}}"/>
<div ng-show="images.length > 0">
<button type="button" ng-click="upload()">Upload</button>
</div>
<div style="margin-top:50px;">
<div data-ng-show="prct">process : {{prct}} %</div>
<div data-ng-show="success">success : {{success}}</div>
<div data-ng-show="error">error : {{error}}</div>
</div>