Do not rely on javascript for form submits without direct upload

app/javascript/shared/activestorage/ujs.js

@@ -0,0 +1,105 @@
+import { DirectUploadsController } from 'activestorage/src/direct_uploads_controller';
+import { findElement } from 'activestorage/src/helpers';
+import './progress';
+
+// This is a patched copy of https://github.com/rails/rails/blob/master/activestorage/app/javascript/activestorage/ujs.js
+// It fixes support for multiple input/button elements on direct upload forms
+
+const processingAttribute = 'data-direct-uploads-processing';
+let started = false;
+
+export function start() {
+  if (!started) {
+    started = true;
+    document.addEventListener('submit', didSubmitForm);
+    document.addEventListener('click', didSubmitFormElement);
+    document.addEventListener('ajax:before', didSubmitRemoteElement);
+  }
+}
+
+export default { start };
+
+function didSubmitForm(event) {
+  handleFormSubmissionEvent(event);
+}
+
+function didSubmitFormElement(event) {
+  const { target } = event;
+  if (isSubmitElement(target)) {
+    handleFormSubmissionEvent(formSubmitEvent(event), target);
+  }
+}
+
+function didSubmitRemoteElement(event) {
+  if (event.target.tagName == 'FORM') {
+    handleFormSubmissionEvent(event);
+  }
+}
+
+function formSubmitEvent(event) {
+  return {
+    target: event.target.form,
+    preventDefault() {
+      event.preventDefault();
+    }
+  };
+}
+
+function isSubmitElement({ tagName, type, form }) {
+  if (form && (tagName === 'BUTTON' || tagName === 'INPUT')) {
+    return type === 'submit';
+  }
+  return false;
+}
+
+function handleFormSubmissionEvent(event, button) {
+  const form = event.target;
+
+  if (form.hasAttribute(processingAttribute)) {
+    event.preventDefault();
+    return;
+  }
+
+  const controller = new DirectUploadsController(form);
+  const { inputs } = controller;
+
+  if (inputs.length) {
+    event.preventDefault();
+    form.setAttribute(processingAttribute, '');
+    inputs.forEach(disable);
+    controller.start(error => {
+      form.removeAttribute(processingAttribute);
+      if (error) {
+        inputs.forEach(enable);
+      } else {
+        submitForm(form, button);
+      }
+    });
+  }
+}
+
+function submitForm(form, button) {
+  button = button || findElement(form, 'input[type=submit]');
+  if (button) {
+    const { disabled } = button;
+    button.disabled = false;
+    button.focus();
+    button.click();
+    button.disabled = disabled;
+  } else {
+    button = document.createElement('input');
+    button.type = 'submit';
+    button.style.display = 'none';
+    form.appendChild(button);
+    button.click();
+    form.removeChild(button);
+  }
+}
+
+function disable(input) {
+  input.disabled = true;
+}
+
+function enable(input) {
+  input.disabled = false;
+}