Show progress spinner during upload (#43)

mtlynch · Feb 25, 2022 · ffd387f · ffd387f
1 parent 8180110
commit ffd387f
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 22 deletions.
diff --git a/static/js/upload.js b/static/js/upload.js
@@ -6,9 +6,19 @@ function dateInFuture(daysFromNow) {
   return d;
 }
 
+function hideElement(el) {
+  el.classList.add("is-hidden");
+}
+
+function showElement(el) {
+  el.classList.remove("is-hidden");
+}
+
 const uploadEl = document.querySelector(".file");
 const resultEl = document.getElementById("upload-result");
 const errorContainer = document.getElementById("error");
+const progressSpinner = document.getElementById("progress-spinner");
+const uploadForm = document.getElementById("upload-form");
 
 const expirationContainer = document.querySelector(".expiration-container");
 const expirationSelect = document.getElementById("expiration-select");
@@ -32,7 +42,9 @@ for (const [k, v] of Object.entries(expirationTimes)) {
 document
   .querySelector('.file-input[name="resume"]')
   .addEventListener("change", (evt) => {
-    errorContainer.classList.add("is-hidden");
+    hideElement(errorContainer);
+    hideElement(uploadForm);
+    showElement(progressSpinner);
     uploadFile(evt.target.files[0], expirationSelect.value)
       .then((res) => {
         const entryId = res.id;
@@ -48,6 +60,10 @@ document
       })
       .catch((error) => {
         document.getElementById("error-message").innerText = error;
-        errorContainer.classList.remove("is-hidden");
+        showElement(errorContainer);
+        showElement(uploadForm);
+      })
+      .finally(() => {
+        hideElement(progressSpinner);
       });
   });
diff --git a/templates/upload.html b/templates/upload.html
@@ -8,33 +8,39 @@
 {{define "content"}}
 <h1 class="title">Upload</h1>
 
-<div class="file has-name is-boxed">
-  <label class="file-label">
-    <input class="file-input" type="file" name="resume">
-    <span class="file-cta">
-      <span class="file-icon">
-        <i class="fas fa-upload"></i>
+<div id="upload-form">
+  <div class="file has-name is-boxed">
+    <label class="file-label">
+      <input class="file-input" type="file" name="resume">
+      <span class="file-cta">
+        <span class="file-icon">
+          <i class="fas fa-upload"></i>
+        </span>
+        <span class="file-label">
+          Choose a file…
+        </span>
       </span>
-      <span class="file-label">
-        Choose a file…
+      <span class="file-name">
+        IMG_1234.png
       </span>
-    </span>
-    <span class="file-name">
-      IMG_1234.png
-    </span>
-  </label>
-</div>
+    </label>
+  </div>
 
-<div class="field my-3 expiration-container">
-  <label class="label">Expiration</label>
-  <div class="control">
-    <div class="select">
-      <select id="expiration-select">
-      </select>
+  <div class="field my-3 expiration-container">
+    <label class="label">Expiration</label>
+    <div class="control">
+      <div class="select">
+        <select id="expiration-select">
+        </select>
+      </div>
     </div>
   </div>
 </div>
 
+<div class="fa-3x is-hidden" id="progress-spinner">
+  <i class="fas fa-spinner fa-spin"></i>
+</div>
+
 <div id="upload-result"></div>
 
 <div id="error" class="is-hidden my-3">