From 683b59bb478f4b4890c378d5de08d415758b385e Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Tue, 17 Sep 2019 14:20:15 +0200
Subject: [PATCH] Add function to cancel file upload.

---
 app/static/js/opaque.js            | 16 ++++++++++++----
 app/templates/services/nlp.html.j2 |  2 +-
 app/templates/services/ocr.html.j2 |  2 +-
 3 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/app/static/js/opaque.js b/app/static/js/opaque.js
index 8f4842eb..9d9b8ac9 100644
--- a/app/static/js/opaque.js
+++ b/app/static/js/opaque.js
@@ -1,4 +1,4 @@
-function sendNewJobFormData(newJobFormElement, progressModalElement) {
+function sendNewJobFormData(newJobFormElement, progressModalElement, request) {
   var formData;
   var progress;
   var progressModal;
@@ -6,7 +6,6 @@ function sendNewJobFormData(newJobFormElement, progressModalElement) {
 
   formData = new FormData(newJobFormElement);
   progressModal = M.Modal.getInstance(progressModalElement);
-  request = new XMLHttpRequest();
 
   progressModal.options.dismissible = false;
   progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
@@ -15,7 +14,7 @@ function sendNewJobFormData(newJobFormElement, progressModalElement) {
     progressModalElement.querySelector(".total").innerHTML = event.total.toString();
     progressModalElement.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
   });
-  request.addEventListener("loadend", function(event) {
+  request.addEventListener("load", function(event) {
     newJobFormElement.reset();
     location.reload();
   });
@@ -24,9 +23,18 @@ function sendNewJobFormData(newJobFormElement, progressModalElement) {
   request.open("POST", window.location.href);
   request.send(formData);
 }
+
 function initNewJobForm(newJobFormElement, progressModalElement) {
+  var request;
+
+  request = new XMLHttpRequest();
+
   newJobFormElement.addEventListener("submit", function(event) {
     event.preventDefault();
-    sendNewJobFormData(newJobFormElement, progressModalElement);
+    sendNewJobFormData(newJobFormElement, progressModalElement, request);
+  });
+
+  progressModalElement.querySelector(".cancel").addEventListener("click", function(event) {
+    request.abort();
   });
 }
diff --git a/app/templates/services/nlp.html.j2 b/app/templates/services/nlp.html.j2
index 9437a4f4..8fcf30aa 100644
--- a/app/templates/services/nlp.html.j2
+++ b/app/templates/services/nlp.html.j2
@@ -131,7 +131,7 @@
     </div>
   </div>
   <div class="modal-footer">
-    <a href="#!" class="modal-close waves-effect waves-green btn-flat disabled">Cancel</a>
+    <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>
   </div>
 </div>
 
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index 58aba95c..9368e880 100644
--- a/app/templates/services/ocr.html.j2
+++ b/app/templates/services/ocr.html.j2
@@ -148,7 +148,7 @@
     </div>
   </div>
   <div class="modal-footer">
-    <a href="#!" class="modal-close waves-effect waves-green btn-flat disabled">Cancel</a>
+    <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>
   </div>
 </div>