Angular upload file directive - angularjs

Question

I need a directive for upload file (brwose to choose file, and get it as binary data ) , in my angular application.
I use it a lot of times, so it has to be generic.
What is the best way to do it?

Answer 1

https://github.com/flowjs/ng-flow
This works fine.Of course some wrapping directive can be made at your side.

Answer 2

directive code
.directive("fileReaderGallery", ['background', function (background) {
return {
restrict: "E",
scope: true,
templateUrl: "templates/directive.html",
replace: true,
link: function ($scope, el, attrs) {
var input = null,
drag_image_gallery = el.find('.drag_image_gallery');
$scope.dragging = false;
$scope.fileselected = false;
$scope.uploaded = false;
$scope.uploading = false;
$scope.image = null;
$scope.clearFileReader = function () {
if (!attrs.styling || !input) return false;
$scope.formTitan.elementStyles[attrs.styling][$scope.styledItem.pt]['background-image'] = '';
$scope.formSelected[attrs.styling].imageFile = null;
$scope.formSelected[attrs.styling].isImage = false;
input.value = '';
$scope.fileselected = false;
$scope.imageName = '';
};
var readfiles = function (files) {
var reader, bg;
if (files && files[0]) {
if (files.length > 1) {
return console.log("Select single file only");
}
reader = new FileReader;
reader.onload = function (e) {
if (files[0].type.indexOf('image/') !== -1) {
if (e.target.result) {
bg = {
'background-image': e.target.result,
'background-repeat': 'repeat',
'background-position': 'top',
'background-size': ''
};
$scope.uploading = true;
$scope.$apply(function () {
background.add(angular.copy(bg));
$scope.current.dcBGImage = angular.copy(bg);
$scope.imageName = files[0].name;
$scope.image = e.target.result;
$scope.fileselected = true;
console.log(files[0])
});
}
} else {
return console.log('Please select an Image');
}
};
return reader.readAsDataURL(files[0]);
}
};
$scope.clickUpload = function () {
el.find('.bg-file-reader').click();
};
drag_image_gallery[0].ondragover = function () {
$scope.dragging = true;
//drag_image_gallery.addClass('ondragover');
$scope.$digest();
return false;
};
drag_image_gallery[0].ondragleave = function () {
$scope.dragging = false;
$scope.$digest();
//drag_image_gallery.removeClass('ondragover');
};
drag_image_gallery[0].ondrop = function (e) {
$scope.dragging = false;
$scope.$digest();
//drag_image_gallery.removeClass('ondragover');
e.preventDefault();
readfiles(e.dataTransfer.files);
};
el.find('.bg-file-reader').on('change', function () {
readfiles(this.files);
});
}
};
}]);
html template code
<div class="row upload_image text-center">
<div class="drag_image drag_image_gallery row text-center" ng-class=" {ondragover:dragging}">
Drag an Image here
</div>
OR
<div class="row text-center choose_computer">
<button ng-click="clickUpload()" class="btn btn-default">Choose from your computer</button>
<input type="file" class="bg-file-reader upload" name="gallery"/>
</div>
</div>
directive with drag and drop and chose file both functionality