aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorFrederick Muriuki Muriithi2022-06-13 15:02:19 +0300
committerFrederick Muriuki Muriithi2022-06-13 15:02:19 +0300
commitc2fa70ec8503d10b990575a547036bfd70a53825 (patch)
treedf7a575b0e2d103a410d419df63503196cad1268
parent557d1d5c19ab518fa7abb3229c6d9042867e6c00 (diff)
downloadgn-uploader-c2fa70ec8503d10b990575a547036bfd70a53825.tar.gz
Add upload progress indicator
-rw-r--r--qc_app/entry.py2
-rw-r--r--qc_app/static/css/styles.css19
-rw-r--r--qc_app/static/js/upload_progress.js92
-rw-r--r--qc_app/templates/index.html18
4 files changed, 130 insertions, 1 deletions
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%}