Image Input Definition Directive

An Image Input Definition directive for the complete image definition for your image input.

by M. Junaid Salaat

HTML

<div ng-app="imgRead" ng-controller="Controller">
    <div class="form-group">
        <label for="InputFiled">File input for Definition</label>
        <input type="file" id="InputFiled" file-def="formImage" />
    </div>
    <input type="submit" class="btn btn-success btn-group-sm" ng-click="submitImg()" />
</div>

CSS

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

JavaScript

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

    .directive("fileDef", [function () {
    return {
        scope: {
            fileDef: "="
        },
        link: function (scope, element, attributes) {
            element.bind("change", function (changeEvent) {
                scope.$apply(function () {
                    scope.fileDef = changeEvent.target.files[0];
                    // or all selected files:
                    // scope.fileread = changeEvent.target.files;
                });
            });
        }
    };
}]);

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