xhr-upload: send global metadata when `bundle: true` (#1677)

examples/xhr-bundle/main.js

@@ -3,7 +3,8 @@ const Dashboard = require('@uppy/dashboard')
 const XHRUpload = require('@uppy/xhr-upload')
 
 const uppy = Uppy({
-  debug: true
+  debug: true,
+  meta: { something: 'xyz' }
 })
 
 uppy.use(Dashboard, {
@@ -16,5 +17,6 @@ uppy.use(Dashboard, {
 uppy.use(XHRUpload, {
   bundle: true,
   endpoint: 'http://localhost:9967/upload',
+  metaFields: ['something'],
   fieldName: 'files'
 })

packages/@uppy/xhr-upload/src/index.js

@@ -124,12 +124,12 @@ module.exports = class XHRUpload extends Plugin {
 
   getOptions (file) {
     const overrides = this.uppy.getState().xhrUpload
-    const opts = Object.assign({},
-      this.opts,
-      overrides || {},
-      file.xhrUpload || {}
-    )
-    opts.headers = {}
+    const opts = {
+      ...this.opts,
+      ...(overrides || {}),
+      ...(file.xhrUpload || {}),
+      headers: {}
+    }
     Object.assign(opts.headers, this.opts.headers)
     if (overrides) {
       Object.assign(opts.headers, overrides.headers)
@@ -184,16 +184,20 @@ module.exports = class XHRUpload extends Plugin {
     }
   }
 
-  createFormDataUpload (file, opts) {
-    const formPost = new FormData()
-
+  addMetadata (formData, meta, opts) {
     const metaFields = Array.isArray(opts.metaFields)
       ? opts.metaFields
       // Send along all fields by default.
-      : Object.keys(file.meta)
+      : Object.keys(meta)
     metaFields.forEach((item) => {
-      formPost.append(item, file.meta[item])
+      formData.append(item, meta[item])
     })
+  }
+
+  createFormDataUpload (file, opts) {
+    const formPost = new FormData()
+
+    this.addMetadata(formPost, file.meta, opts)
 
     const dataWithUpdatedType = setTypeInBlob(file)
 
@@ -206,6 +210,27 @@ module.exports = class XHRUpload extends Plugin {
     return formPost
   }
 
+  createBundledUpload (files, opts) {
+    const formPost = new FormData()
+
+    const { meta } = this.uppy.getState()
+    this.addMetadata(formPost, meta, opts)
+
+    files.forEach((file) => {
+      const opts = this.getOptions(file)
+
+      const dataWithUpdatedType = setTypeInBlob(file)
+
+      if (file.name) {
+        formPost.append(opts.fieldName, dataWithUpdatedType, file.name)
+      } else {
+        formPost.append(opts.fieldName, dataWithUpdatedType)
+      }
+    })
+
+    return formPost
+  }
+
   createBareUpload (file, opts) {
     return file.data
   }
@@ -383,17 +408,10 @@ module.exports = class XHRUpload extends Plugin {
       const endpoint = this.opts.endpoint
       const method = this.opts.method
 
-      const formData = new FormData()
-      files.forEach((file, i) => {
-        const opts = this.getOptions(file)
-
-        const dataWithUpdatedType = setTypeInBlob(file)
-
-        if (file.name) {
-          formData.append(opts.fieldName, dataWithUpdatedType, file.meta.name)
-        } else {
-          formData.append(opts.fieldName, dataWithUpdatedType)
-        }
+      const optsFromState = this.uppy.getState().xhrUpload
+      const formData = this.createBundledUpload(files, {
+        ...this.opts,
+        ...(optsFromState || {})
       })
 
       const xhr = new XMLHttpRequest()