diff options
| -rw-r--r-- | qc_app/entry.py | 2 | ||||
| -rw-r--r-- | qc_app/static/css/styles.css | 19 | ||||
| -rw-r--r-- | qc_app/static/js/upload_progress.js | 92 | ||||
| -rw-r--r-- | qc_app/templates/index.html | 18 |
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%} |