@uppy/form: fix submitOnSuccess and triggerUploadOnSubmit combination

[Murderlon]

Closes #5057

submitOnSuccess and triggerUploadOnSubmit is a valid combination for a use case where you want Uppy to start uploading if the user manually clicks submit inside the form but also submit the form after Uppy has successfully uploaded files (clicking upload instead of submit). Because we use form.requestSubmit() the submit only happens if form validations pass.

The problem however is that submitOnSuccess triggers the submit event listener which we use to triggerUploadOnSubmit, which makes Uppy start uploading after it just finished uploading, causing an infinite loop.

Solution

Manually setting a completed boolean based on upload (start) and upload-success.

It doesn't feel right but I don't think we can do much better without redesigning uppy internals.

Alternatives that don't work

If Uppy was a finite state machine, we could easily check in which state we are and prevent a double upload. Unfortunately that's not the case and there is no easy/cheap way to know all uploads have been done.

• Iterate over all files or uploads (expensive) to check if they're done
• Use uppy.getState().allowUpload, a property that's set based on some condition like allow multiple uploads, retrying, etc. Should theoretically be ideal for this scenario but it can be still be true in some cases so it doesn't work.

[github-actions]

Diff output files

diff --git a/packages/@uppy/form/lib/index.js b/packages/@uppy/form/lib/index.js
index 91bf65d..0fb917a 100644
--- a/packages/@uppy/form/lib/index.js
+++ b/packages/@uppy/form/lib/index.js
@@ -1,3 +1,13 @@
+function _classPrivateFieldLooseBase(receiver, privateKey) {
+  if (!Object.prototype.hasOwnProperty.call(receiver, privateKey)) {
+    throw new TypeError("attempted to use private field on non-instance");
+  }
+  return receiver;
+}
+var id = 0;
+function _classPrivateFieldLooseKey(name) {
+  return "__private_" + id++ + "_" + name;
+}
 import BasePlugin from "@uppy/core/lib/BasePlugin.js";
 import findDOMElement from "@uppy/utils/lib/findDOMElement";
 import toArray from "@uppy/utils/lib/toArray";
@@ -20,12 +30,17 @@ function assertHTMLFormElement(input) {
   }
   return input;
 }
+var _completed = _classPrivateFieldLooseKey("completed");
 export default class Form extends BasePlugin {
   constructor(uppy, opts) {
     super(uppy, {
       ...defaultOptions,
       ...opts,
     });
+    Object.defineProperty(this, _completed, {
+      writable: true,
+      value: false,
+    });
     this.type = "acquirer";
     this.id = this.opts.id || "Form";
     this.handleFormSubmit = this.handleFormSubmit.bind(this);
@@ -35,11 +50,13 @@ export default class Form extends BasePlugin {
     this.getMetaFromForm = this.getMetaFromForm.bind(this);
   }
   handleUploadStart() {
+    _classPrivateFieldLooseBase(this, _completed)[_completed] = false;
     if (this.opts.getMetaFromForm) {
       this.getMetaFromForm();
     }
   }
   handleSuccess(result) {
+    _classPrivateFieldLooseBase(this, _completed)[_completed] = true;
     if (this.opts.addResultToForm) {
       this.addResultToForm(result);
     }
@@ -48,7 +65,7 @@ export default class Form extends BasePlugin {
     }
   }
   handleFormSubmit(ev) {
-    if (this.opts.triggerUploadOnSubmit) {
+    if (this.opts.triggerUploadOnSubmit && !_classPrivateFieldLooseBase(this, _completed)[_completed]) {
       ev.preventDefault();
       const elements = toArray(ev.target.elements);
       const disabledByUppy = [];