Make DragDrop work with Modal

or great again

src/plugins/DragDrop.js

@@ -21,21 +21,6 @@ export default class DragDrop extends Plugin {
     // Check for browser dragDrop support
     this.isDragDropSupported = this.checkDragDropSupport()
 
-    // Initialize dragdrop component, mount it to container DOM node
-    this.container = document.querySelector(this.opts.target)
-    this.container.innerHTML = this.render()
-
-    // Set selectors
-    this.dropzone = document.querySelector(`${this.opts.target} .UppyDragDrop-inner`)
-    this.input = document.querySelector(`${this.opts.target} .UppyDragDrop-input`)
-    this.status = document.querySelector(`${this.opts.target} .UppyDragDrop-status`)
-    this.progress = document.querySelector(`${this.opts.target} .UppyDragDrop-progress`)
-
-    Utils.addClass(this.container, 'UppyDragDrop')
-    if (this.isDragDropSupported) {
-      Utils.addClass(this.container, 'is-dragdrop-supported')
-    }
-
     // Bind `this` to class methods
     this.initEvents = this.initEvents.bind(this)
     this.handleDrop = this.handleDrop.bind(this)
@@ -60,8 +45,6 @@ export default class DragDrop extends Plugin {
     ${!this.core.opts.autoProceed
       ? `<button class="UppyDragDrop-uploadBtn" type="submit">${this.core.i18n('upload')}</button>`
       : ''}
-    <!--div class="UppyDragDrop-status"></div-->
-    <!--div class="UppyDragDrop-progress"></div-->
   </form>`
   }
 
@@ -89,7 +72,7 @@ export default class DragDrop extends Plugin {
   }
 
   initEvents () {
-    this.core.log(`waiting for some files to be dropped on ${this.opts.target}`)
+    this.core.log(`waiting for some files to be dropped on ${this.target}`)
 
     // prevent default actions for all drag & drop events
     const strEvents = 'drag dragstart dragend dragover dragenter dragleave drop'
@@ -162,6 +145,28 @@ export default class DragDrop extends Plugin {
     })
   }
 
+  install () {
+    // Initialize dragdrop component, mount it to container DOM node
+    // this.container = document.querySelector(this.opts.target)
+    // this.container.innerHTML = this.render()
+
+    const caller = this
+    this.target = this.getTarget(this.opts.target, caller)
+    this.container = document.querySelector(this.target)
+    this.container.innerHTML = this.render()
+
+    // this.target.innerHTML = this.render()
+
+    // Set selectors
+    this.dropzone = document.querySelector(`${this.target} .UppyDragDrop-inner`)
+    this.input = document.querySelector(`${this.target} .UppyDragDrop-input`)
+
+    Utils.addClass(this.container, 'UppyDragDrop')
+    if (this.isDragDropSupported) {
+      Utils.addClass(this.container, 'is-dragdrop-supported')
+    }
+  }
+
   run (results) {
     this.core.log({
       class: this.constructor.name,

src/plugins/Dummy.js

@@ -30,7 +30,8 @@ export default class Dummy extends Plugin {
     // )
     const caller = this
     this.target = this.getTarget(this.opts.target, caller)
-    this.target.innerHTML = this.render()
+    this.targetEl = document.querySelector(this.target)
+    this.targetEl.innerHTML = this.render()
     return
   }
 }

src/plugins/Modal.js

@@ -61,7 +61,10 @@ export default class Modal extends Plugin {
 
     this.initEvents()
 
-    return document.querySelector(`#${callerPluginName}`)
+    const target = `#${callerPluginName}`
+
+    // return document.querySelector(`#${callerPluginName}`)
+    return target
   }
 
   render () {

website/src/examples/fakemodal/app.es6

@@ -1,9 +1,11 @@
 import Uppy from '../../../../src/core/Core.js'
 import Dummy from '../../../../src/plugins/Dummy.js'
+import DragDrop from '../../../../src/plugins/DragDrop.js'
 import Modal from '../../../../src/plugins/Modal.js'
 
 const uppy = new Uppy({debug: true})
 uppy
   .use(Modal)
   .use(Dummy, {target: Modal})
+  .use(DragDrop, {target: Modal})
   .run()