From 9005c583ca1a39d3d5b960c33210857d1f8b0485 Mon Sep 17 00:00:00 2001
From: Patrick Jentsch <p.jentsch@uni-bielefeld.de>
Date: Mon, 16 Sep 2019 12:12:42 +0200
Subject: [PATCH] Add progress bar for file upload.
---
app/static/js/opaque.js | 30 ++++++++++++++++++++++++++++++
app/templates/base.html.j2 | 1 +
app/templates/services/nlp.html.j2 | 5 ++++-
app/templates/services/ocr.html.j2 | 5 ++++-
4 files changed, 39 insertions(+), 2 deletions(-)
create mode 100644 app/static/js/opaque.js
diff --git a/app/static/js/opaque.js b/app/static/js/opaque.js
new file mode 100644
index 00000000..0e23679d
--- /dev/null
+++ b/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"));
+ });
+}
diff --git a/app/templates/base.html.j2 b/app/templates/base.html.j2
index 06e4a961..c6bac81a 100644
--- a/app/templates/base.html.j2
+++ b/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>
diff --git a/app/templates/services/nlp.html.j2 b/app/templates/services/nlp.html.j2
index 846d888c..a86a94a3 100644
--- a/app/templates/services/nlp.html.j2
+++ b/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 %}
diff --git a/app/templates/services/ocr.html.j2 b/app/templates/services/ocr.html.j2
index 5c3a542a..f3c7013d 100644
--- a/app/templates/services/ocr.html.j2
+++ b/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 %}
--
GitLab