Add cancel button to file upload pattern

We’ve seen users try to click the upload again when their file doesn’t
upload in time. This is because we’re giving them no feedback that
something is happening.

I reckon that changing the button to a cancel button is the easiest way
to show that something is happening, and also means that (unlike
disabling the send button) the user can’t get stuck if the connection
drops completely.

app/assets/javascripts/fileUpload.js

@@ -3,19 +3,24 @@
 
   Modules.FileUpload = function() {
 
-    let $form;
+    this.submit = () => this.$form.trigger('submit');
 
-    this.submit = () => $form.trigger('submit');
+    this.showCancelButton = () => $('.file-upload-button', this.$form).replaceWith(`
+      <a href="" class='file-upload-button-cancel'>Cancel upload</a>
+    `);
 
     this.start = function(component) {
 
-      $form = $(component);
+      this.$form = $(component);
 
       // Clear the form if the user navigates back to the page
-      $(window).on("pageshow", () => $form[0].reset());
+      $(window).on("pageshow", () => this.$form[0].reset());
 
       // Need to put the event on the container, not the input for it to work properly
-      $form.on('change', '.file-upload-field', this.submit);
+      this.$form.on(
+        'change', '.file-upload-field',
+        () => this.submit() && this.showCancelButton()
+      );
 
     };
 

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

@@ -31,6 +31,13 @@
     &-button {
       @include button($button-colour);
       display: inline-block;
+      margin-right: 5px;
+    }
+
+    &-button-cancel {
+      @include button($error-colour);
+      display: inline-block;
+      margin-right: 5px;
     }
 
     &-filename {