Improve upload user experience. (#125)

Until user has selected files, keep submit button disabled and show it as faded.
artefactual-labs · May 18, 2023 · 39bf89a · 39bf89a
1 parent 3f321ed
commit 39bf89a
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/uploader/Transfer/templates/transfer.html b/uploader/Transfer/templates/transfer.html
@@ -37,7 +37,7 @@ <h2>Upload Research Data</h2>
       <button id="chooserProxy" type="button">Choose directory</button>
       <input id="chooser" name="files" type="file" webkitdirectory directory class="collapse" />
 
-      <button id="chooserSubmit" type="submit" class="btn btn-primary">Upload</button>
+      <button id="chooserSubmit" type="submit" class="btn btn-primary opacity-25" disabled="true">Upload</button>
       <div id="chooserSpinner" class="spinner-border text-primary invisible" role="status">
         <span class="visually-hidden">Loading...</span>
       </div>

diff --git a/uploader/static/upload.js b/uploader/static/upload.js
@@ -13,6 +13,8 @@ $chooserProxy.addEventListener("click", function() {
 $chooser.addEventListener("change", function() {
   const message = ($chooser.files.length) + " files selected";
   $chooserFeedback.textContent = message;
+  $chooserSubmit.removeAttribute("disabled");
+  $chooserSubmit.classList.remove("opacity-25");
 });
 
 // Hide directory picker, etc., and show spinner when starting upload