Single image upload Directive

An image upload angular directive for displaying and getting image.

by M. Junaid Salaat

HTML

<div ng-app="imgRead" ng-controller="Controller">
    <div class="form-group">
        <label for="InputFile">File input</label>
        <input type="file" id="InputFile" image-read="formImg" />
    </div>
    <img src="{{formImg}}" alt="" />
    <input type="submit" class="btn btn-success btn-group-sm" ng-click="submitImg(myform)" />
</div>

CSS

/* See The Console for base64 image after submit */

JavaScript

angular.module('imgRead', [])
    .controller('Controller', controller)

.directive("imageRead", [function () {
      return {
        scope: {
          imageRead: "="
        },
        link: function (scope, element, attributes) {
          element.bind("change", function (changeEvent) {
            var reader = new FileReader();
            reader.onload = function (loadEvent) {
              scope.$apply(function () {
                scope.imageRead = loadEvent.target.result;
              });
            };
            reader.readAsDataURL(changeEvent.target.files[0]);
          });
        }
      }
    }])

function controller($scope) {
    $scope.submitImg = function (form) {
        console.log($scope.formImg);
    };
}