From 82ecaa36289542208de7203ef3e0ad92be3ef514 Mon Sep 17 00:00:00 2001
From: Chris Hill-Scott <me@quis.cc>
Date: Fri, 8 Apr 2016 14:00:30 +0100
Subject: [PATCH] Add cancel button to file upload pattern
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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              | 15 ++++++++++-----
 .../stylesheets/components/file-upload.scss       |  7 +++++++
 2 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/app/assets/javascripts/fileUpload.js b/app/assets/javascripts/fileUpload.js
index 2e3c1948a..c65379d59 100644
--- a/app/assets/javascripts/fileUpload.js
+++ b/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()
+      );
 
     };
 
diff --git a/app/assets/stylesheets/components/file-upload.scss b/app/assets/stylesheets/components/file-upload.scss
index 96a6b6a3e..2b9a596ca 100644
--- a/app/assets/stylesheets/components/file-upload.scss
+++ b/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 {