aboutsummaryrefslogtreecommitdiff
path: root/qc_app/static/js/upload_progress.js
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 /qc_app/static/js/upload_progress.js
parent557d1d5c19ab518fa7abb3229c6d9042867e6c00 (diff)
downloadgn-uploader-c2fa70ec8503d10b990575a547036bfd70a53825.tar.gz
Add upload progress indicator
Diffstat (limited to 'qc_app/static/js/upload_progress.js')
-rw-r--r--qc_app/static/js/upload_progress.js92
1 files changed, 92 insertions, 0 deletions
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);
+}