Disable Topic form button until upload completes (#369)

Author: dmitrytrager

app/javascript/controllers/upload_controller.js

@@ -1,11 +1,21 @@
 import { Controller } from "@hotwired/stimulus";
 
 export default class extends Controller {
-  static targets = ["filesInput", "fileItem", "filesContainer", "hiddenField"];
+  static targets = [
+    "filesInput",
+    "fileItem",
+    "filesContainer",
+    "hiddenField",
+    "submitButton",
+    "spinner",
+  ];
 
   uploadFile(event) {
     event.preventDefault();
 
+    this.submitButtonTarget.classList.add("disabled");
+    this.spinnerTarget.classList.remove("d-none");
+
     const filesInput = this.filesInputTarget;
     let files = Array.from(filesInput.files);
 
@@ -33,6 +43,9 @@ export default class extends Controller {
           filesInput.value = "";
         }
       });
+
+    this.submitButtonTarget.classList.remove("disabled");
+    this.spinnerTarget.classList.add("d-none");
   }
 
   removeFile(event) {

app/views/topics/_form.html.erb

@@ -71,10 +71,18 @@
           <% end %>
 
           <%= f.file_field :documents, multiple: true, class: "form-control mt-4", id: "documents", data: { upload_target: "filesInput", action: "change->upload#uploadFile" } %>
-        </div>
-        <div class="col-12 d-flex justify-content-end">
-          <%= f.submit class: "btn btn-primary me-1 mb-1" %>
-          <%= link_to "Cancel", topics_path, class: "btn btn-light-secondary me-1 mb-1" %>
+
+          <div class="d-none" data-upload-target="spinner">
+            <div class="spinner-border spinner-border-sm mt-4" role="status">
+              <span class="visually-hidden">Uploading in progress...</span>
+            </div>
+            <span>Uploading in progress...</span>
+          </div>
+
+          <div class="col-12 d-flex justify-content-end mt-4">
+            <%= f.submit class: "btn btn-primary me-1 mb-1", data: { upload_target: "submitButton" } %>
+            <%= link_to "Cancel", topics_path, class: "btn btn-light-secondary me-1 mb-1" %>
+          </div>
         </div>
       </div>
     </div>