Add form field for file input plus button and label

Author: Nick Litwin

app/directives/file-form-field/file-form-field.directive.js

@@ -0,0 +1,43 @@
+(function() {
+  'use strict';
+
+  angular.module('tcUIComponents').directive('fileFormField', fileFormField);
+
+  function fileFormField() {
+    return {
+      restrict: 'E',
+      templateUrl: 'directives/file-form-field/file-form-field.html',
+      scope: {
+        labelText: '@',
+        fieldId: '@',
+        placeholder: '@',
+        fileType: '@',
+        mandatory: '=',
+        buttonText: '@',
+        setFileReference: '&'
+      },
+      link: function(scope, element, attrs) {
+        scope.selectFile = selectFile;
+
+        // fieldId is not set on element at this point, so grabbing with class .none
+        // which exists on the element right away
+        var fileInput = $(element[0]).find('.none');
+        var fileNameInput = $(element[0]).find('input[type=text]');
+
+        fileInput.bind('change', function() {
+          var file = fileInput[0].files[0];
+
+          // Pass file object up through callback into controller
+          scope.setFileReference({file: file, fieldId: scope.fieldId});
+
+          // Set the file name as the value of the disabled input
+          fileNameInput[0].value = file.name;
+        });
+
+        function selectFile() {
+          fileInput.click();
+        }
+      }
+    }
+  }
+})();

app/directives/file-form-field/file-form-field.jade

@@ -0,0 +1,12 @@
+.labelwrapper
+  label.tc-label {{labelText}}
+    span.lowercase(ng-if="fileType") {{fileType | addBeginningSpace}}
+
+  span.tc-label__mandatory(ng-if="mandatory") #[span *]mandatory
+
+.changenamelater
+  input(type="text", placeholder="{{placeholder}}", disabled)
+
+  button.tc-btn(ng-click="selectFile()") {{buttonText}}
+
+  input.none(type="file", id="{{fieldId}}")

app/directives/file-form-field/file-form-field.spec.js

@@ -0,0 +1,19 @@
+/* jshint -W117, -W030 */
+describe('File Form Field Directive', function() {
+  var scope;
+
+  // USE AS TEMPLATE FOR DIRECTIVES
+
+  beforeEach(function() {
+    bard.appModule('tcUIComponents');
+    bard.inject(this, '$compile', '$rootScope');
+  });
+
+  bard.verifyNoOutstandingHttpRequests();
+
+  xdescribe('', function() {
+    beforeEach(function() {});
+
+    it('', function() {});
+  });
+});