upload: Enable cancelling an upload.

2 files changed, 15 insertions, 0 deletions

diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js
index 049dbfe..98a503a 100644
--- a/qc_app/static/js/upload_progress.js
+++ b/qc_app/static/js/upload_progress.js
@@ -35,6 +35,15 @@ function make_progress_updater(file, indicator_elt) {
     };
 }
 
+function setup_cancel_upload(request, indicator_elt) {
+    document.getElementById("btn-cancel-upload").addEventListener(
+	"click", function(event) {
+	    event.preventDefault();
+	    request.abort();
+	    indicator_elt.setAttribute("class", "hidden");
+	});
+}
+
 function setup_request(file, progress_indicator_elt) {
     var request = new XMLHttpRequest();
     var updater = make_progress_updater(file, progress_indicator_elt);
@@ -42,6 +51,7 @@ function setup_request(file, progress_indicator_elt) {
     request.onload = function(event) {
 	document.location.assign(request.responseURL);
     };
+    setup_cancel_upload(request, progress_indicator_elt)
     return request;
 }
 
diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index 9ee3af6..2db6048 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -75,6 +75,11 @@
   </progress>
   <p id="progress-text">Uploading 0%</p>
   <p id="progress-extra-text">Processing</p>
+  <form id="frm-cancel-upload" style="border-style: none;">
+    <button id="btn-cancel-upload" type="submit" class="btn btn-danger">
+      Cancel
+    </button>
+  </form>
 </div>
 {%endblock%}