Angular input change handler

by sqren

HTML

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="file" custom-on-change="uploadFile" />
</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', function(event) {
        var files = event.target.files;
        onChangeFunc(files);
      });

      element.bind('click', function() {
        element.val('');
      });
    }
  };
});


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