Enable multiple submit buttons for Active Storage forms

2 files changed, 22 insertions, 2 deletions

diff --git a/activestorage/app/assets/javascripts/activestorage.js b/activestorage/app/assets/javascripts/activestorage.js
index d3fd795a3a..8a51805960 100644
--- a/activestorage/app/assets/javascripts/activestorage.js
+++ b/activestorage/app/assets/javascripts/activestorage.js
@@ -855,14 +855,21 @@
     return DirectUploadsController;
   }();
   var processingAttribute = "data-direct-uploads-processing";
+  var submitButtonsByForm = new WeakMap;
   var started = false;
   function start() {
     if (!started) {
       started = true;
+      document.addEventListener("click", didClick, true);
       document.addEventListener("submit", didSubmitForm);
       document.addEventListener("ajax:before", didSubmitRemoteElement);
     }
   }
+  function didClick(event) {
+    if (event.target.tagName == "INPUT" && event.target.type == "submit" && event.target.form) {
+      submitButtonsByForm.set(event.target.form, event.target);
+    }
+  }
   function didSubmitForm(event) {
     handleFormSubmissionEvent(event);
   }
@@ -894,7 +901,8 @@
     }
   }
   function submitForm(form) {
-    var button = findElement(form, "input[type=submit]");
+    var button = submitButtonsByForm.get(form) || findElement(form, "input[type=submit]");
+
     if (button) {
       var _button = button, disabled = _button.disabled;
       button.disabled = false;
@@ -909,6 +917,7 @@
       button.click();
       form.removeChild(button);
     }
+    submitButtonsByForm.delete(form);
   }
   function disable(input) {
     input.disabled = true;
diff --git a/activestorage/app/javascript/activestorage/ujs.js b/activestorage/app/javascript/activestorage/ujs.js
index 08c535470d..f5353389ef 100644
--- a/activestorage/app/javascript/activestorage/ujs.js
+++ b/activestorage/app/javascript/activestorage/ujs.js
@@ -2,16 +2,25 @@ import { DirectUploadsController } from "./direct_uploads_controller"
 import { findElement } from "./helpers"
 
 const processingAttribute = "data-direct-uploads-processing"
+const submitButtonsByForm = new WeakMap
 let started = false
 
 export function start() {
   if (!started) {
     started = true
+    document.addEventListener("click", didClick, true)
     document.addEventListener("submit", didSubmitForm)
     document.addEventListener("ajax:before", didSubmitRemoteElement)
   }
 }
 
+function didClick(event) {
+  const { target } = event
+  if (target.tagName == "INPUT" && target.type == "submit" && target.form) {
+    submitButtonsByForm.set(target.form, target)
+  }
+}
+
 function didSubmitForm(event) {
   handleFormSubmissionEvent(event)
 }
@@ -49,7 +58,8 @@ function handleFormSubmissionEvent(event) {
 }
 
 function submitForm(form) {
-  let button = findElement(form, "input[type=submit]")
+  let button = submitButtonsByForm.get(form) || findElement(form, "input[type=submit]")
+
   if (button) {
     const { disabled } = button
     button.disabled = false
@@ -64,6 +74,7 @@ function submitForm(form) {
     button.click()
     form.removeChild(button)
   }
+  submitButtonsByForm.delete(form)
 }
 
 function disable(input) {