From 6377ed8375b7a9cd05c7cb4c5d97fd2e4599b680 Mon Sep 17 00:00:00 2001
From: Frederick Muriuki Muriithi
Date: Wed, 16 Nov 2022 04:51:14 +0300
Subject: ui: Don't show upload progress indicator if file is not selected.

---
 qc_app/static/css/styles.css        |  4 ++++
 qc_app/static/js/upload_progress.js | 16 ++++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/qc_app/static/css/styles.css b/qc_app/static/css/styles.css
index d20c1fb..d2071e6 100644
--- a/qc_app/static/css/styles.css
+++ b/qc_app/static/css/styles.css
@@ -128,6 +128,10 @@ input[disabled="true"],input[disabled="disabled"] {
     background-color: #A9A9A9;
 }
 
+.invalid-input{
+    background-color: #F8D7DA;
+}
+
 form legend {
     padding-left: 3em;
     text-transform: capitalize;
diff --git a/qc_app/static/js/upload_progress.js b/qc_app/static/js/upload_progress.js
index d615be4..fdcbe68 100644
--- a/qc_app/static/js/upload_progress.js
+++ b/qc_app/static/js/upload_progress.js
@@ -69,16 +69,20 @@ function upload_data(event) {
     event.preventDefault();
 
     var pindicator = document.getElementById("progress-indicator");
-    pindicator.setAttribute("class", "modal");
 
-    var form = document.getElementsByTagName("form")[0]
+    var form = document.getElementsByTagName("form")[0];
+    var the_file = form.querySelector("input[type='file']").files[0];
+    if(the_file === undefined) {
+	form.querySelector("#file_upload").parentElement.setAttribute(
+	    "class", "invalid-input");
+	return false;
+    }
+    pindicator.setAttribute("class", "modal");
     var formdata = setup_formdata(form);
 
-    document.getElementById("progress-filename").innerHTML = (
-	form.querySelector("input[type='file']").files[0].name);
+    document.getElementById("progress-filename").innerHTML = the_file.name;
     var request = setup_request(
-	form.querySelector("input[type='file']").files[0],
-	document.getElementById("progress-indicator"));
+	the_file, document.getElementById("progress-indicator"));
     request.open(form.getAttribute("method"), form.getAttribute("action"));
     request.send(formdata);
     return false;
-- 
cgit v1.2.3