JSFiddle - angular input file upload

by Tarek Faham

HTML

<p>
  Select a file, and you should see an alert message
</p>

<div ng-app="myApp" ng-controller="myCtrl">
    <input type="file" custom-on-change="uploadFile"/>
      <br>
        {{theFile.name}}<br />
        {{theFile.size}} byte(s)<br/>
        {{theFile.type}}    
</div>

JavaScript

var myApp = angular.module('myApp', []);
myApp.directive('customOnChange', function() {
  return {
    restrict: 'A',
    link: function (scope, element, attrs) {
      var onChangeFunc = scope.$eval(attrs.customOnChange);
      element.bind('change', onChangeFunc);
    }
  };
});


myApp.controller('myCtrl', function($scope) {
	debugger;
    $scope.uploadFile = function(){
        var filename = event.target.files[0].name;
        //alert('file was selected: ' + filename);
        $scope.$apply(function () {
	        $scope.theFile = event.target.files[0];
        })
    };
});