Update progress modal

app/static/js/opaque.js

@@ -10,14 +10,18 @@ function sendNewJobFormData(newJobFormElement, progressModalElement, request) {
   progressModal.options.dismissible = false;
   progressModalElement.querySelector(".title").innerHTML = newJobFormElement.title.value;
   request.upload.addEventListener("progress", function(event) {
-    progressModalElement.querySelector(".loaded").innerHTML = event.loaded.toString();
-    progressModalElement.querySelector(".total").innerHTML = event.total.toString();
-    progressModalElement.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
+    progressInPercent = Math.floor(100 * event.loaded / event.total).toString() + "%";
+    progressModalElement.querySelector(".progress-in-percent").innerHTML = progressInPercent;
+    progressModalElement.querySelector(".determinate").style.width = progressInPercent;
   });
   request.addEventListener("load", function(event) {
     newJobFormElement.reset();
     location.reload();
   });
+  request.addEventListener("abort", function(event) {
+    progressModalElement.querySelector(".progress-in-percent").innerHTML = "0%";
+    progressModalElement.querySelector(".determinate").style.width = "0%";
+  });
 
   progressModal.open();
   request.open("POST", window.location.href);

app/templates/services/nlp.html.j2

@@ -124,11 +124,11 @@
 
 <div id="progress-modal" class="modal">
   <div class="modal-content">
-    <h4 class="title"></h4>
-    <p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
+    <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
     <div class="progress">
       <div class="determinate" style="width: 0%"></div>
     </div>
+    <p><span class="progress-in-percent"></span> uploaded</p>
   </div>
   <div class="modal-footer">
     <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>

app/templates/services/ocr.html.j2

@@ -141,11 +141,11 @@
 
 <div id="progress-modal" class="modal">
   <div class="modal-content">
-    <h4 class="title"></h4>
-    <p>Uploading files... <span class="loaded"></span>/<span class="total"></span></p>
+    <h4><i class="material-icons prefix">file_upload</i> Uploading files for <span class="title"></span></h4>
     <div class="progress">
       <div class="determinate" style="width: 0%"></div>
     </div>
+    <p><span class="progress-in-percent"></span> uploaded</p>
   </div>
   <div class="modal-footer">
     <a href="#!" class="modal-close waves-effect waves-green btn red cancel">Cancel</a>