Use direct <input/> references to trigger file selection in Dashboard.

Every element that was opening a file selection dialog by simulating a
`.UppyDashboard-input` click, was also already rendering one of those
input elements. This patch first creates the `input` elements, and
saves them so their variables can be used to simulate a click event
directly.

This way the `container` prop no longer has to be passed down through
every layer, and we can turn the `.target` property in plugins into
a DOM element because it isn't used in `querySelector` anymore.

src/plugins/Dashboard/ActionBrowseTagline.js

@@ -1,6 +1,11 @@
 const html = require('yo-yo')
 
 module.exports = (props) => {
+  const input = html`
+    <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
+           onchange=${props.handleInputChange} />
+  `
+
   return html`
     <span>
       ${props.acquirers.length === 0
@@ -10,11 +15,9 @@ module.exports = (props) => {
       <button type="button"
               class="UppyDashboard-browse"
               onclick=${(ev) => {
-                const input = document.querySelector(`${props.container} .UppyDashboard-input`)
                 input.click()
               }}>${props.i18n('browse')}</button>
-      <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
-             onchange=${props.handleInputChange} />
+      ${input}
     </span>
   `
 }

src/plugins/Dashboard/Dashboard.js

@@ -77,7 +77,6 @@ module.exports = function Dashboard (props) {
           files: props.files,
           handleInputChange: handleInputChange,
           acquirers: props.acquirers,
-          container: props.container,
           panelSelectorPrefix: props.panelSelectorPrefix,
           showPanel: props.showPanel,
           i18n: props.i18n
@@ -98,7 +97,6 @@ module.exports = function Dashboard (props) {
             acquirers: props.acquirers,
             files: props.files,
             handleInputChange: handleInputChange,
-            container: props.container,
             showFileCard: props.showFileCard,
             showProgressDetails: props.showProgressDetails,
             totalProgress: props.totalProgress,

src/plugins/Dashboard/FileList.js

@@ -12,7 +12,6 @@ module.exports = (props) => {
           <h3 class="UppyDashboard-dropFilesTitle">
             ${ActionBrowseTagline({
               acquirers: props.acquirers,
-              container: props.container,
               handleInputChange: props.handleInputChange,
               i18n: props.i18n
             })}

src/plugins/Dashboard/Tabs.js

@@ -11,7 +11,6 @@ module.exports = (props) => {
         <h3 class="UppyDashboardTabs-title">
         ${ActionBrowseTagline({
           acquirers: props.acquirers,
-          container: props.container,
           handleInputChange: props.handleInputChange,
           i18n: props.i18n
         })}
@@ -20,6 +19,11 @@ module.exports = (props) => {
     `
   }
 
+  const input = html`
+    <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
+           onchange=${props.handleInputChange} />
+  `
+
   return html`<div class="UppyDashboardTabs">
     <nav>
       <ul class="UppyDashboardTabs-list" role="tablist">
@@ -28,14 +32,12 @@ module.exports = (props) => {
                   role="tab"
                   tabindex="0"
                   onclick=${(ev) => {
-                    const input = document.querySelector(`${props.container} .UppyDashboard-input`)
                     input.click()
                   }}>
             ${localIcon()}
             <h5 class="UppyDashboardTab-name">${props.i18n('localDisk')}</h5>
           </button>
-          <input class="UppyDashboard-input" type="file" name="files[]" multiple="true"
-                 onchange=${props.handleInputChange} />
+          ${input}
         </li>
         ${props.acquirers.map((target) => {
           return html`<li class="UppyDashboardTab">

src/plugins/Dashboard/index.js

@@ -380,7 +380,6 @@ module.exports = class DashboardUI extends Plugin {
       progressindicators: progressindicators,
       autoProceed: this.core.opts.autoProceed,
       id: this.id,
-      container: this.opts.target,
       hideModal: this.hideModal,
       showProgressDetails: this.opts.showProgressDetails,
       inline: this.opts.inline,

src/plugins/DragDrop/index.js

@@ -112,7 +112,7 @@ module.exports = class DragDrop extends Plugin {
 
   render (state) {
     const onSelect = (ev) => {
-      const input = document.querySelector(`${this.target} .UppyDragDrop-input`)
+      const input = this.target.querySelector('.UppyDragDrop-input')
       input.click()
     }
 
@@ -166,7 +166,7 @@ module.exports = class DragDrop extends Plugin {
     const plugin = this
     this.target = this.mount(target, plugin)
 
-    dragDrop(`${this.target} .UppyDragDrop-container`, (files) => {
+    dragDrop(this.target.querySelector('.UppyDragDrop-container'), (files) => {
       this.handleDrop(files)
       this.core.log(files)
     })

src/plugins/Plugin.js

@@ -95,7 +95,7 @@ module.exports = class Plugin {
       this.el = plugin.render(this.core.state)
       targetElement.appendChild(this.el)
 
-      return target
+      return targetElement
     } else {
       // TODO: is instantiating the plugin really the way to roll
       // just to get the plugin name?