transloadit: Add AttachFileInputs plugin

packages/@uppy/file-input/src/index.js

@@ -83,7 +83,7 @@ module.exports = class FileInput extends Plugin {
         name={this.opts.inputName}
         onchange={this.handleInputChange}
         multiple={restrictions.maxNumberOfFiles !== 1}
-        accept={restrictions.allowedFileTypes}
+        accept={restrictions.allowedFileTypes.join(',')}
         ref={(input) => { this.input = input }}
         value="" />
       {this.opts.pretty &&

packages/@uppy/transloadit-preset/src/AttachFileInputs.js

@@ -0,0 +1,69 @@
+const { Plugin } = require('@uppy/core')
+const toArray = require('@uppy/utils/lib/toArray')
+const findDOMElement = require('@uppy/utils/lib/findDOMElement')
+
+/**
+ * Add files from existing file inputs to Uppy.
+ */
+class AttachFileInputs extends Plugin {
+  constructor (uppy, opts) {
+    super(uppy, opts)
+
+    this.id = opts.id || 'AttachFileInputs'
+    this.type = 'acquirer'
+
+    this.handleChange = this.handleChange.bind(this)
+    this.inputs = null
+  }
+
+  handleChange (event) {
+    const files = toArray(event.target.files)
+    files.forEach((file) => {
+      try {
+        this.uppy.addFile({
+          source: this.id,
+          name: file.name,
+          type: file.type,
+          data: file
+        })
+      } catch (err) {
+        // Nothing, restriction errors handled in Core
+      }
+    })
+  }
+
+  install () {
+    this.el = findDOMElement(this.opts.target)
+    if (!this.el) {
+      throw new Error('[AttachFileInputs] Target form does not exist')
+    }
+
+    const { restrictions } = this.uppy.opts
+
+    this.inputs = this.el.querySelectorAll('input[type="file"]')
+    this.inputs.forEach((input) => {
+      input.addEventListener('change', this.handleChange)
+
+      if (!input.hasAttribute('multiple')) {
+        if (restrictions.maxNumberOfFiles !== 1) {
+          input.setAttribute('multiple', 'multiple')
+        } else {
+          input.removeAttribute('multiple')
+        }
+      }
+
+      if (!input.hasAttribute('accept') && restrictions.allowedFileTypes) {
+        input.setAttribute('accept', restrictions.allowedFileTypes.join(','))
+      }
+    })
+  }
+
+  uninstall () {
+    this.inputs.forEach((input) => {
+      input.removeEventListener('change', this.handleChange)
+    })
+    this.inputs = null
+  }
+}
+
+module.exports = AttachFileInputs

packages/@uppy/transloadit-preset/src/TransloaditFormResult.js

@@ -0,0 +1,53 @@
+const { Plugin } = require('@uppy/core')
+const findDOMElement = require('@uppy/utils/lib/findDOMElement')
+
+/**
+ * After an upload completes, inject result data from Transloadit in a hidden input.
+ *
+ * Must be added _after_ the Transloadit plugin.
+ */
+class TransloaditFormResult extends Plugin {
+  constructor (uppy, opts) {
+    super(uppy, opts)
+
+    this.id = opts.id || 'TransloaditFormResult'
+    this.type = 'modifier'
+
+    this.handleUpload = this.handleUpload.bind(this)
+  }
+
+  getAssemblyStatuses (fileIDs) {
+    const assemblyIds = []
+    fileIDs.forEach((fileID) => {
+      const file = this.uppy.getFile(fileID)
+      const assembly = file.transloadit && file.transloadit.assembly
+      if (assembly && assemblyIds.indexOf(assembly) === -1) {
+        assemblyIds.push(assembly)
+      }
+    })
+
+    const tl = this.uppy.getPlugin(this.opts.transloaditPluginId || 'Transloadit')
+    return assemblyIds.map((id) => tl.getAssembly(id))
+  }
+
+  handleUpload (fileIDs) {
+    const assemblies = this.getAssemblyStatuses(fileIDs)
+    const input = document.createElement('input')
+    input.type = 'hidden'
+    input.name = this.opts.name
+    input.value = JSON.stringify(assemblies)
+
+    const target = findDOMElement(this.opts.target)
+    target.appendChild(input)
+  }
+
+  install () {
+    this.uppy.addPostProcessor(this.handleUpload)
+  }
+
+  uninstall () {
+    this.uppy.removePostProcessor(this.handleUpload)
+  }
+}
+
+module.exports = TransloaditFormResult

packages/@uppy/transloadit-preset/src/form.js

@@ -1,47 +1,9 @@
 const Uppy = require('@uppy/core')
 const Form = require('@uppy/form')
-const findDOMElement = require('@uppy/utils/lib/findDOMElement')
+const AttachFileInputs = require('./AttachFileInputs')
+const TransloaditFormResult = require('./TransloaditFormResult')
 const addTransloaditPlugin = require('./addTransloaditPlugin')
 
-class TransloaditFormResult extends Uppy.Plugin {
-  constructor (uppy, opts) {
-    super(uppy, opts)
-
-    this.id = opts.id || 'TransloaditFormResult'
-    this.type = 'modifier'
-
-    this.onUpload = this.onUpload.bind(this)
-  }
-
-  getAssemblyStatuses (files) {
-    const assemblyIds = []
-    files.forEach((file) => {
-      const assembly = file.transloadit && file.transloadit.assembly
-      if (assembly && assemblyIds.indexOf(assembly) === -1) {
-        assemblyIds.push(assembly)
-      }
-    })
-
-    const tl = this.uppy.getPlugin('Transloadit')
-    return assemblyIds.map((id) => tl.getAssembly(id))
-  }
-
-  onUpload ({ successful, failed }) {
-    const assemblies = this.getAssemblyStatuses(successful)
-    const input = document.createElement('input')
-    input.type = 'hidden'
-    input.name = this.opts.name
-    input.value = JSON.stringify(assemblies)
-
-    const target = findDOMElement(this.opts.target)
-    target.appendChild(input)
-  }
-
-  install () {
-    this.uppy.on('upload', this.onUpload)
-  }
-}
-
 function form (target, opts) {
   const uppy = Uppy({
     allowMultipleUploads: false,
@@ -51,6 +13,7 @@ function form (target, opts) {
 
   uppy.use(TransloaditFormResult, {
     target,
+    transloaditPluginId: 'Transloadit',
     name: 'transloadit'
   })
 
@@ -60,6 +23,10 @@ function form (target, opts) {
     addResultToForm: false // using custom implementation instead
   })
 
+  uppy.use(AttachFileInputs, {
+    target
+  })
+
   return uppy
 }