Angular upload file directive

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

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

Answer 2

https://github.com/flowjs/ng-flow

This works fine.Of course some wrapping directive can be made at your side.