// angular file uploader based on https://github.com/blueimp/jQuery-File-Upload minimal uploader.
angular.module('lbg.directives', []);
angular.module('lbg', ['lbg.directives']);
angular.module('lbg.directives').directive('lbgUploader', function() {
var uploader = function(scope, element, attrs) {
attrs.$observe('lbgUploader', function(value) {
var uploadScript = value;
$(element).find('input#uploader').fileupload({
dataType: 'json',
url: uploadScript,
options: {
acceptFileTypes: /(\.|\/)(gif|jpe?g|png)$/i,
maxFileSize: 500000
},
done: function (e, data) {
scope.$emit('uploadDone', {success: true});
}
});
});
};
return {
restrict: 'A',
replace:true,
//transclude:true,
link: uploader,
template:"<div><input id='uploader' type='file' name='files' multiple='multiple' /></div>"
};
});
<!DOCTYPE html>
<html data-ng-app='plunker'>
<head lang="en">
<meta charset="utf-8">
<title>Custom Plunker</title>
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/vendor/jquery.ui.widget.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.iframe-transport.js"></script>
<script src="https://raw.github.com/blueimp/jQuery-File-Upload/master/js/jquery.fileupload.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.js"></script>
<script src="app.js"></script>
<script src="lbgUploader.js"></script>
</head>
<body data-ng-controller='MainCtrl'>
<div data-lbg-uploader="some/upload/path/{{variable}}"></div>
</body>
</html>
var app = angular.module('plunker', ['lbg']);
app.controller('MainCtrl', function($scope) {
$scope.variable = 'Whatever';
});