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 {