tl-wrapper: Embeddable dashboard part 1

examples/transloadit/index.html

@@ -45,7 +45,7 @@
         <p>
           <label>
             attachments:
-            <input type="file">
+            <span class="dashboard"></span>
           </label>
           <div class="progress"></div>
 

examples/transloadit/main.js

@@ -14,6 +14,7 @@ const formUppy = transloadit.form('#test-form', {
     auth: { key: '05a61ed019fe11e783fdbd1f56c73eb0' },
     template_id: 'be001500a56011e889f9cddd88df842c'
   },
+  dashboard: '#test-form .dashboard',
   progressBar: '#test-form .progress'
 })
 

packages/@uppy/transloadit-preset/package.json

@@ -34,6 +34,7 @@
     "@uppy/form": "0.29.0",
     "@uppy/google-drive": "0.29.0",
     "@uppy/instagram": "0.29.0",
+    "@uppy/status-bar": "0.29.0",
     "@uppy/transloadit": "0.29.0",
     "@uppy/url": "0.29.0",
     "@uppy/utils": "0.29.0",

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

@@ -1,9 +1,12 @@
 const Uppy = require('@uppy/core')
 const Form = require('@uppy/form')
 const StatusBar = require('@uppy/status-bar')
+const Dashboard = require('@uppy/dashboard')
+const findDOMElement = require('@uppy/utils/lib/findDOMElement')
 const AttachFileInputs = require('./AttachFileInputs')
 const TransloaditFormResult = require('./TransloaditFormResult')
 const addTransloaditPlugin = require('./addTransloaditPlugin')
+const addProviders = require('./addProviders')
 
 function form (target, opts) {
   const uppy = Uppy(opts)
@@ -22,9 +25,37 @@ function form (target, opts) {
     addResultToForm: false // using custom implementation instead
   })
 
-  uppy.use(AttachFileInputs, {
-    target
-  })
+  const useDashboard = opts.dashboard || opts.modal
+
+  if (useDashboard) {
+    const dashboardTarget = findDOMElement(opts.dashboard)
+    const dashboardId = 'form:Dashboard'
+    const dashboardOpts = {
+      id: dashboardId,
+      target: dashboardTarget
+    }
+    if (opts.modal) {
+      let trigger = 'input[type="file"]'
+      const button = document.createElement('button')
+      button.textContent = 'Select files'
+      const old = findDOMElement(trigger, findDOMElement(target))
+      old.parentNode.replaceChild(old, button)
+      dashboardOpts.trigger = button
+    } else {
+      dashboardOpts.inline = true
+      dashboardOpts.hideUploadButton = true
+    }
+    uppy.use(Dashboard, dashboardOpts)
+
+    if (Array.isArray(opts.providers)) {
+      addProviders(uppy, opts.providers, {
+        ...opts,
+        target: uppy.getPlugin(dashboardId)
+      })
+    }
+  } else {
+    uppy.use(AttachFileInputs, { target })
+  }
 
   if (opts.statusBar) {
     uppy.use(StatusBar, {

packages/@uppy/utils/src/findDOMElement.js

@@ -6,9 +6,9 @@ const isDOMElement = require('./isDOMElement')
  * @param {Node|string} element
  * @return {Node|null}
  */
-module.exports = function findDOMElement (element) {
+module.exports = function findDOMElement (element, context = document) {
   if (typeof element === 'string') {
-    return document.querySelector(element)
+    return context.querySelector(element)
   }
 
   if (typeof element === 'object' && isDOMElement(element)) {