File pick with Angular JS

Question

I would like to pick up a file with AngularJS:

HTML:

Answer 1

Following is my approach with a directive.

Directive

angular
  .module('yourModule')
  .directive('fileChange', function() {
    return {
     restrict: 'A',
     scope: {
       handler: '&'
     },
     link: function (scope, element) {
      element.on('change', function (event) {
        scope.$apply(function(){
          scope.handler({files: event.target.files});
        });
      });
     }
    };
});

HTML

Controller

fileSelect = function (files) {
      var file = files[0];
      //you will get the file object here
}