feat: guard to prevent premature form submissions while uploading

assets/controllers/form_upload_guard_controller.js

@@ -0,0 +1,40 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = ['submit']
+
+    connect () {
+        this.uploading = false
+        this.boundOnUploading = this.onUploading.bind(this)
+        this.boundOnComplete = this.onComplete.bind(this)
+        window.addEventListener('dropzone:uploading', this.boundOnUploading)
+        window.addEventListener('dropzone:complete', this.boundOnComplete)
+    }
+
+    onUploading () {
+        this.uploading = true
+        this.submitTargets.forEach(button => {
+            button.disabled = true
+        })
+    }
+
+    onComplete () {
+        this.uploading = false
+        this.submitTargets.forEach(button => {
+            button.disabled = false
+        })
+    }
+
+    guard (event) {
+        if (this.uploading) {
+            event.preventDefault()
+            event.stopImmediatePropagation()
+        }
+    }
+
+    disconnect () {
+        window.removeEventListener('dropzone:uploading', this.boundOnUploading)
+        window.removeEventListener('dropzone:complete', this.boundOnComplete)
+    }
+}

assets/controllers/upload_collection_controller.js

@@ -73,7 +73,7 @@ export default class extends Controller {
         })
     }
 
-    disconnect() {
+    disconnect () {
         this.dropzone.destroy()
     }
 }

assets/styles/components/button.css

@@ -1,6 +1,6 @@
 .btn {
     @apply inline-flex space-x-1 justify-center rounded-lg text-sm uppercase font-semibold py-2.5 px-4;
-    @apply bg-primary text-white hover:bg-primary/80 shadow-md;
+    @apply bg-primary text-white hover:bg-primary/80 shadow-md disabled:opacity-50 disabled:cursor-not-allowed;
 }
 
 .btn--small {