From c2fa70ec8503d10b990575a547036bfd70a53825 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Mon, 13 Jun 2022 15:02:19 +0300
Subject: Add upload progress indicator

---
 qc_app/entry.py                     |  2 +-
 qc_app/static/css/styles.css        | 19 ++++++++
 qc_app/static/js/upload_progress.js | 92 +++++++++++++++++++++++++++++++++++++
 qc_app/templates/index.html         | 18 ++++++++
 4 files changed, 130 insertions(+), 1 deletion(-)
 create mode 100644 qc_app/static/js/upload_progress.js

(limited to 'qc_app')

diff --git a/qc_app/entry.py b/qc_app/entry.py
index 25e2eed..d876bb7 100644
--- a/qc_app/entry.py
+++ b/qc_app/entry.py
@@ -50,7 +50,7 @@ def errors(request) -> Tuple[str, ...]:
 
 def zip_file_errors(filepath, upload_dir) -> Tuple[str, ...]:
     """Check the uploaded zip file for errors."""
-    zfile_errors = ("Fail always!!",)
+    zfile_errors = tuple()
     if is_zipfile(filepath):
         zfile = ZipFile(filepath, "r")
         infolist = zfile.infolist()
diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index aa6b049..9e5a4ec 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -82,3 +82,22 @@ table {
     border-color:  #336699;
     padding: 0 0.3em 0.3em 0.3em;
 }
+
+.hidden {
+    display: none;
+}
+
+.modal {
+    position: fixed;
+    opacity: 90%;
+    left: 1em;
+    top: 1em;
+    width: 500px;
+    height: 250px;
+    text-align: center;
+    z-index: 9999;
+    background: #F4F4F4;
+
+    border: 2px solid;
+    border-radius: 1em;
+}
diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js
new file mode 100644
index 0000000..d615be4
--- /dev/null
+++ b/qc_app/static/js/upload_progress.js
@@ -0,0 +1,92 @@
+function make_processing_indicator(elt) {
+    var count = 0;
+    return function() {
+	var message = "Checking for errors: "
+	if(count > 5) {
+	    count = 1;
+	}
+	for(i = 0; i < count; i++) {
+	    message = message + ".";
+	}
+	elt.innerHTML = message
+	count = count + 1
+    };
+}
+
+function make_progress_updater(file, indicator_elt) {
+    var progress_bar = indicator_elt.querySelector("#progress-bar");
+    var progress_text = indicator_elt.querySelector("#progress-text");
+    var extra_text = indicator_elt.querySelector("#progress-extra-text");
+    return function(event) {
+	if(event.loaded <= file.size) {
+	    var percent = Math.round((event.loaded / file.size) * 100);
+	    progress_bar.value = percent
+	    progress_text.innerHTML = "Uploading: " + percent + "%";
+	    extra_text.setAttribute("class", "hidden")
+	}
+
+	if(event.loaded == event.total) {
+	    progress_bar.value = 100;
+	    progress_text.innerHTML = "Uploaded: 100%";
+	    extra_text.setAttribute("class", null);
+	    intv = setInterval(make_processing_indicator(extra_text), 400);
+	    setTimeout(function() {clearTimeout(intv);}, 20000);
+	}
+    };
+}
+
+function setup_request(file, progress_indicator_elt) {
+    var request = new XMLHttpRequest();
+    var updater = make_progress_updater(file, progress_indicator_elt);
+    request.upload.addEventListener("progress", updater);
+    request.onload = function(event) {
+	document.location.assign(request.responseURL);
+    };
+    return request;
+}
+
+function selected_filetype(radios) {
+    for(idx = 0; idx < radios.length; idx++) {
+	if(radios[idx].checked) {
+	    return radios[idx].value;
+	}
+    }
+}
+
+function setup_formdata(form) {
+    var formdata = new FormData();
+    formdata.append(
+	"qc_text_file",
+	form.querySelector("input[type='file']").files[0]);
+    formdata.append(
+	"filetype",
+	selected_filetype(
+	    Array.from(form.querySelectorAll("input[type='radio']"))));
+    return formdata;
+}
+
+function upload_data(event) {
+    event.preventDefault();
+
+    var pindicator = document.getElementById("progress-indicator");
+    pindicator.setAttribute("class", "modal");
+
+    var form = document.getElementsByTagName("form")[0]
+    var formdata = setup_formdata(form);
+
+    document.getElementById("progress-filename").innerHTML = (
+	form.querySelector("input[type='file']").files[0].name);
+    var request = setup_request(
+	form.querySelector("input[type='file']").files[0],
+	document.getElementById("progress-indicator"));
+    request.open(form.getAttribute("method"), form.getAttribute("action"));
+    request.send(formdata);
+    return false;
+}
+
+
+function setup_upload_handlers() {
+    console.info("Setting up the upload handlers.")
+    upload_form = document.getElementsByTagName("form")[0];
+    upload_form.addEventListener("submit", upload_data);
+}
diff --git a/qc_app/templates/index.html b/qc_app/templates/index.html
index b14f3d4..18eb784 100644
--- a/qc_app/templates/index.html
+++ b/qc_app/templates/index.html
@@ -35,4 +35,22 @@
 
   <input type="submit" value="upload file" class="btn btn-main" />
 </form>
+
+<div id="progress-indicator" class="hidden">
+  <h3>Uploading file</h3>
+  <p id="progress-filename">the-file</p>
+  <progress id="progress-bar" value="0" max="100">
+    0
+  </progress>
+  <p id="progress-text">Uploading 0%</p>
+  <p id="progress-extra-text">Processing</p>
+</div>
+{%endblock%}
+
+
+{%block javascript%}
+<script type="text/javascript" src="static/js/upload_progress.js"></script>
+<script type="text/javascript">
+  setup_upload_handlers();
+</script>
 {%endblock%}
-- 
cgit v1.2.3