Add custom file upload component

The default browser file upload control is difficult to style, but looks totally
out of place.

This commit replaces it with one that has a GOV.UK style button, as a first
step.

Based heavily on this example:
http://tympanus.net/codrops/2015/09/15/styling-customizing-file-inputs-smart-way/

app/assets/javascripts/fileUpload.js

@@ -0,0 +1,27 @@
+(function(Modules) {
+  "use strict";
+
+  Modules.FileUpload = function() {
+
+    let $field, $button, $filename;
+
+    this.update = function() {
+
+      $filename.text($field.val().split('\\').pop());
+
+    };
+
+    this.start = function(component) {
+
+      $field = $('.file-upload-field', component);
+      $button = $('.file-upload-button', component);
+      $filename = $('.file-upload-filename', component);
+
+      // Need to put the event on the container, not the input for it to work properly
+      $(component).on('change', '.file-upload-field', this.update);
+
+    };
+
+  };
+
+})(window.GOVUK.Modules);

app/assets/stylesheets/components/file-upload.scss

@@ -0,0 +1,36 @@
+.js-enabled {
+
+  .file-upload {
+
+    &-label {
+      @include bold-19;
+      display: block;
+      margin: 0 0 10px 0;
+    }
+
+    &-field {
+      width: 0.1px;
+      height: 0.1px;
+      opacity: 0;
+      overflow: hidden;
+      position: absolute;
+      z-index: -1;
+    }
+
+    &-field:focus + .file-upload-button {
+      outline: 3px solid $yellow;
+    }
+
+    &-button {
+      @include button($panel-colour);
+      display: inline-block;
+    }
+
+    &-filename {
+      display: inline-block;
+      padding-left: $gutter-half;
+    }
+
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -40,6 +40,7 @@
 @import 'components/big-number';
 @import 'components/banner';
 @import 'components/textbox';
+@import 'components/file-upload';
 @import 'components/browse-list';
 @import 'components/email-message';
 @import 'components/api-key';