form: exclude own metadata, append result instead of overwriting

packages/@uppy/form/src/index.js

@@ -23,6 +23,7 @@ module.exports = class Form extends Plugin {
       resultName: 'uppyResult',
       getMetaFromForm: true,
       addResultToForm: true,
+      replaceResultInFormWithNew: true,
       submitOnSuccess: false,
       triggerUploadOnSubmit: false
     }
@@ -86,26 +87,47 @@ module.exports = class Form extends Plugin {
 
     let resultInput = this.form.querySelector(`[name="${this.opts.resultName}"]`)
     if (resultInput) {
-      resultInput.value = JSON.stringify(result)
-      return
+      if (this.opts.replaceResultInFormWithNew) {
+        // Replace existing result with the newer result on `complete` event.
+        // This behavior is not ideal, since you most likely want to always keep
+        // all results in the input. This is kept for backwards compatability until 2.0.
+        resultInput.value = JSON.stringify(result)
+      } else {
+        // Append new result to the previous result array
+        const updatedResult = JSON.parse(resultInput.value)
+        updatedResult.push(result)
+        resultInput.value = JSON.stringify(updatedResult)
+        return
+      }
     }
 
     resultInput = document.createElement('input')
     resultInput.name = this.opts.resultName
     resultInput.type = 'hidden'
-    resultInput.value = JSON.stringify(result)
+
+    if (this.opts.replaceResultInFormWithNew) {
+      // Result is an object, kept for backwards compatability until 2.0
+      resultInput.value = JSON.stringify(result)
+    } else {
+      // Wrap result in an array so we can have multiple results
+      resultInput.value = JSON.stringify([result])
+    }
+
     this.form.appendChild(resultInput)
   }
 
   getMetaFromForm () {
     const formMeta = getFormData(this.form)
+    // We want to exclude meta the the Form plugin itself has added
+    // See https://github.com/transloadit/uppy/issues/1637
+    delete formMeta[this.opts.resultName]
     this.uppy.setMeta(formMeta)
   }
 
   install () {
     this.form = findDOMElement(this.opts.target)
     if (!this.form || !this.form.nodeName === 'FORM') {
-      console.error('Form plugin requires a <form> target element passed in options to operate, none was found', 'error')
+      this.uppy.log('Form plugin requires a <form> target element passed in options to operate, none was found', 'error')
       return
     }
 

website/src/docs/form.md

@@ -43,11 +43,12 @@ The `@uppy/form` plugin has the following configurable options:
 ```js
 uppy.use(Form, {
   target: null,
+  resultName: 'uppyResult',
   getMetaFromForm: true,
   addResultToForm: true,
-  resultName: 'uppyResult',
-  triggerUploadOnSubmit: false,
-  submitOnSuccess: false
+  replaceResultInFormWithNew: true,
+  submitOnSuccess: false,
+  triggerUploadOnSubmit: false
 })
 ```
 
@@ -59,6 +60,10 @@ A unique identifier for this plugin. It defaults to `'Form'`.
 
 DOM element or CSS selector for the form element. This is required for the plugin to work.
 
+### `resultName: 'uppyResult'`
+
+The `name` attribute for the `<input type="hidden">` where the result will be added.
+
 ### `getMetaFromForm: true`
 
 Configures whether or not to extract metadata from the form. When set to true, the `Form` plugin will extract all fields from a `<form>` element before upload begins. Those fields will then be added to global `uppy.state.meta` and each file’s meta, and appended as (meta)data to the upload in an object with `[file input name attribute]` -> `[file input value]` key/values.
@@ -67,9 +72,11 @@ Configures whether or not to extract metadata from the form. When set to true, t
 
 Configures whether or not to add upload/encoding results back to the form in an `<input name="uppyResult" type="hidden">` element.
 
-### `resultName: 'uppyResult'`
+### `replaceResultInFormWithNew: true`
 
-The `name` attribute for the `<input type="hidden">` where the result will be added.
+By default, the Form plugin will _replace_ the `value` of `<input type="hidden">` it adds with the result (if `addResultToForm` is enabled) on each upload / `complete` event. This behavior can be confusing, because if a user uploads a file and then adds another, only the last result will end up in the hidden input and submitted to your server.
+
+Setting this to `false` turns the value of `<input type="hidden">` into an array and _appends_ each result from `complete` event to it. Since this is likely the desired default behavior in most cases, it will be made default in the next major release of Uppy, the option is kept for backwards compatability.
 
 ### `triggerUploadOnSubmit: false`