tdrozdowski · December 22, 2015 11:49 · Sep 6, 2013 · Sep 6, 2013
diff --git a/example.html b/example.html
@@ -0,0 +1 @@
+<file name="image" ng-model="profilePic" accept="image/png,image/jpg,image/jpeg"/>
diff --git a/FileDirective.coffee b/FileDirective.coffee
@@ -0,0 +1,15 @@
+'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
+  ]
diff --git a/FileDirective.js b/FileDirective.js
@@ -0,0 +1,24 @@
+  '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);
+        }
+      };
+    }
+  ]);
diff --git a/fileInputDemo.coffee b/fileInputDemo.coffee
@@ -0,0 +1,21 @@
+# 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
diff --git a/fileInputDemo.js b/fileInputDemo.js
@@ -0,0 +1,29 @@
+// 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);
+    });
+  };
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<file name="image" ng-model="profilePic" accept="image/png,image/jpg,image/jpeg"/>