AngularJS 1.4

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyController as vm">
        {{ vm.name }}
        <br />
        <input type="file" file-model="vm.file">

    </div>
</body>

JavaScript

angular
        .module('myApp', []); 
        
    angular
    		.module('myApp')
        .controller('MyController', MyController);
        
    function MyController($scope, $http) {
    		var vm = this;
        
        vm.name = 'Hermann';
    	
      
      	$scope.$watch('vm.file', function() {            
            if(vm.file) {
            		console.log(vm.file);
                var reader = new FileReader();
                reader.onload = function() {
                		console.log(reader.result);
                    console.log(vm.file.name);
                    console.log(vm.file.type);
                    console.log(vm.file.size);
										
                    uploadFile(vm.file, reader.result);
                };
                
                reader.readAsDataURL(vm.file);
            }
        });
      
				function uploadFile(file, data) {
        		
            $http.post('api/Files/Upload', data)
            	.then(function success() {
              		console.log('success');
              }, function error() {
              		console.log('error');
              });
        }

    }
    
    
    angular
    		.module('myApp')
        .directive('fileModel', FileModelDirective); 
        
    function FileModelDirective($parse) {
      return {
          restrict: 'A',
          link: function(scope, element, attrs) {
              var model = $parse(attrs.fileModel);
              var modelSetter = model.assign;

              element.bind('change', function(){
                  scope.$apply(function(){
                      modelSetter(scope, element[0].files[0]);
                  });
              });
          }
      };
    }