diff --git a/src/plugins/DragDrop.js b/src/plugins/DragDrop.js index fadf94e29..a8e16770e 100644 --- a/src/plugins/DragDrop.js +++ b/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 ? `` : ''} - - ` } @@ -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, diff --git a/src/plugins/Dummy.js b/src/plugins/Dummy.js index 7f2d3420d..1a9929dcb 100644 --- a/src/plugins/Dummy.js +++ b/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 } } diff --git a/src/plugins/Modal.js b/src/plugins/Modal.js index 40044503a..37b3640d4 100644 --- a/src/plugins/Modal.js +++ b/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 () { diff --git a/website/src/examples/fakemodal/app.es6 b/website/src/examples/fakemodal/app.es6 index 9d656d1e7..f16b4b108 100644 --- a/website/src/examples/fakemodal/app.es6 +++ b/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()