Need to get file inputs working with Angular? Here are a couple - basic - examples in CoffeeScript and then again in JavaScript. This is glommed together from viewing various discussion threads/solutions. Its quite confusing that no single one of them is a complete solution. This should handle everything, including taking care of the boundary he…

example.html

<file name="image" ng-model="profilePic" accept="image/png,image/jpg,image/jpeg"/>

FileDirective.coffee

'use strict';

angular.module('yourApp')
  .directive 'file', [ () ->
    restrict: "E"
    template: "<input type=\"file\" />"
    replace: true
    require: "ngModel"
    link: (scope, element, attr, ctrl) ->
      listener = ->
        scope.$apply ->
          (if attr.multiple then ctrl.$setViewValue(element[0].files) else ctrl.$setViewValue(element[0].files[0]))

      element.bind "change", listener
  ]

FileDirective.js

  'use strict';
  angular.module('yourApp').directive('file', [
    function() {
      return {
        restrict: "E",
        template: "<input type=\"file\" />",
        replace: true,
        require: "ngModel",
        link: function(scope, element, attr, ctrl) {
          var listener;
          listener = function() {
            return scope.$apply(function() {
              if (attr.multiple) {
                return ctrl.$setViewValue(element[0].files);
              } else {
                return ctrl.$setViewValue(element[0].files[0]);
              }
            });
          };
          return element.bind("change", listener);
        }
      };
    }
  ]);

fileInputDemo.coffee

# to be put in a controller - the $http probably should be put into a service, simplified for this example

      $scope.uploadProfile = () ->
        file = $scope.profilePic
        config =
          method : "PUT"
          url : "/profilePic"
          headers : {'Content-Type' : undefined}
          data : { file: $scope.profilePic }
          transformRequest : (data) ->
                              fd = new FormData()
                              angular.forEach data, (value, key) ->
                                fd.append key, value

                              fd

        $http(config)
          .success (results) ->
            console.log "File Upload Results ->", results
          .error (results) ->
            console.log "File upload failed ->", results

fileInputDemo.js

// NOTE - this is presumed to be within an exiting Controller - the $http should be put into a service for proper abstraction.

  $scope.uploadProfile = function() {
    var config, file;
    file = $scope.profilePic;
    config = {
      method: "PUT",
      url: "/profilePic",
      headers: {
        'Content-Type': void 0
      },
      data: {
        file: $scope.profilePic
      },
      transformRequest: function(data) {
        var fd;
        fd = new FormData();
        angular.forEach(data, function(value, key) {
          return fd.append(key, value);
        });
        return fd;
      }
    };
    return $http(config).success(function(results) {
      console.log("File Upload Results ->", results);
    }).error(function(results) {
      return console.log("File upload failed ->", results);
    });
  };