Add progress bar for file upload.

app/static/js/opaque.js

@@ -0,0 +1,30 @@
+function sendNewJobFormData(form, progress) {
+  var XHR = new XMLHttpRequest();
+  var FD = new FormData(form);
+  XHR.upload.addEventListener("progress", function(event) {
+    progress.querySelector(".determinate").style.width = ((event.loaded / event.total) * 100).toString() + "%";
+  });
+  XHR.addEventListener("loadend", function(event) {
+    form.reset();
+    location.reload();
+  });
+  XHR.open("POST", window.location.href);
+  XHR.send(FD);
+}
+function initNewJobForm(newJobFormElement) {
+  newJobFormElement.addEventListener("submit", function(event) {
+    event.preventDefault();
+    var toast = M.toast(
+      {html: `<div class="row">
+                <div class="col s12">${this.title.value}</div>
+                <div class="col s12">
+                  <div class="progress">
+                    <div class="determinate" style="width: 0%"></div>
+                  </div>
+                </div>
+              </div>`,
+       displayLength: Infinity}
+    );
+    sendNewJobFormData(this, toast.el.querySelector(".progress"));
+  });
+}

app/templates/base.html.j2

@@ -12,6 +12,7 @@
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/materialize.min.css') }}" media="screen,projection"/>
     <link type="text/css" rel="stylesheet" href="{{ url_for('static', filename='css/opaque.css') }}" media="screen,projection"/>
     <script src="{{ url_for('static', filename='js/Animations.js') }}"></script>
+    <script src="{{ url_for('static', filename='js/opaque.js') }}"></script>
     <script src="{{ url_for('static', filename='js/jsonpatch.min.js') }}"></script>
     <script src="{{ url_for('static', filename='js/socket.io.js') }}"></script>
     <script src="{{ url_for('static', filename='js/list.js') }}"></script>

app/templates/services/nlp.html.j2

@@ -53,7 +53,7 @@
 
 <div class="col s12">
   <div class="card">
-    <form method="POST" enctype="multipart/form-data">
+    <form method="POST" enctype="multipart/form-data" id="new-nlp-job-form">
       <div class="card-content">
         {{ new_nlp_job_form.hidden_tag() }}
         <div class="row">
@@ -121,4 +121,7 @@
     </form>
   </div>
 </div>
+<script>
+  initNewJobForm(document.getElementById("new-nlp-job-form"));
+</script>
 {% endblock %}

app/templates/services/ocr.html.j2

@@ -54,7 +54,7 @@
 
 <div class="col s12">
   <div class="card">
-    <form method="POST" enctype="multipart/form-data">
+    <form method="POST" enctype="multipart/form-data" id="new-ocr-job-form">
       <div class="card-content">
         {{ new_ocr_job_form.hidden_tag() }}
         <div class="row">
@@ -138,4 +138,7 @@
     </form>
   </div>
 </div>
+<script>
+  initNewJobForm(document.getElementById("new-ocr-job-form"));
+</script>
 {% endblock %}