Angular bind input file element on change event

by Tarek Faham

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<div ng-app="myApp" ng-controller="MyController">
<input type="file" bind-file="myFile" data-ng-model="theFile" />
<input type="button" data-ng-click="resetFile()" value="Reset" />
    <div ng-show="theFile">
        {{theFile.name}}<br />
        {{theFile.size}} byte(s)<br/>
        {{theFile.type}} <br/>
        My File.File.name: {{myFile.name}}
    </div>
    <br>
  <input type="file" fileread="myFileX" data-ng-model="theFile"/>
  <span>File Name X: {{myFileX.name}}</span> 
    
</div>

JavaScript

angular.module('myApp', [])
    .controller('MyController', ['$scope', function ($scope) {
        $scope.theFile = null;
        
        $scope.resetFile = function () {
            $scope.theFile = null;
        };
        
        $scope.myChangeEvent = function () {
            	debugger;
                $scope.$apply(function () {
                ngModel.$setViewValue(event.target.files[0]);
                $scope.$eval(attrs.bindFile) = event.target.files[0];
                });        
        }
    }])
    .directive('bindFile', [function () {
    return {
        require: "ngModel",
        restrict: 'A',
        scope: {
            bindFile: "="
        },
        link: function ($scope, el, attrs, ngModel) {
        	  debugger;
            /*el.bind('change', function (event, $scope) {
            	debugger;
            	$scope.myChangeEvent(event);
            })*/
            el.bind('change', function (event) {
            	debugger;
                $scope.$apply( function () {
                  ngModel.$setViewValue(event.target.files[0]);
                  //$scope.$eval(attrs.bindFile) = event.target.files[0];
                  $scope.bindFile = event.target.files[0];
	                }
                );
                debugger;
            });
            
            $scope.$watch(function () {
                return ngModel.$viewValue;
            }, function (value) {
                if (!value) {
                    el.val("");
                }
            });
        }
    };
}])
.directive("fileread", [function () {
    return {
        scope: {
            fileread: "="
        },
        link: function (scope, element, attributes) {
        	debugger;
            element.bind("change", function (changeEvent) {
                debugger;
                /*
                var reader = new FileReader();
                reader.onload = function (loadEvent) {
                    scope.$apply(function () {
                       ...