diff --git a/packages/@uppy/drop-target/src/index.js b/packages/@uppy/drop-target/src/index.js index 6e38e3ac35..45894934ae 100644 --- a/packages/@uppy/drop-target/src/index.js +++ b/packages/@uppy/drop-target/src/index.js @@ -13,7 +13,9 @@ module.exports = class DropTarget extends BasePlugin { super(uppy, opts) this.type = 'acquirer' this.id = this.opts.id || 'DropTarget' + this.activeClass = this.opts.activeClass || 'uppy-is-drag-over' this.title = 'Drop Target' + this.setMeta = this.opts.setMeta || null // Default options const defaultOpts = { @@ -25,18 +27,21 @@ module.exports = class DropTarget extends BasePlugin { this.removeDragOverClassTimeout = null } - addFiles = (files) => { - const descriptors = files.map((file) => ({ - source: this.id, - name: file.name, - type: file.type, - data: file, - meta: { - // path of the file relative to the ancestor directory the user selected. - // e.g. 'docs/Old Prague/airbnb.pdf' - relativePath: file.relativePath || null, - }, - })) + addFiles = (files, event) => { + const descriptors = files.map((file) => { + return { + source: this.id, + name: file.name, + type: file.type, + data: file, + meta: { + // path of the file relative to the ancestor directory the user selected. + // e.g. 'docs/Old Prague/airbnb.pdf' + relativePath: file.relativePath || null, + ...this.setMeta?.(file, event), + }, + } + }) try { this.uppy.addFiles(descriptors) @@ -48,10 +53,11 @@ module.exports = class DropTarget extends BasePlugin { handleDrop = (event) => { event.preventDefault() event.stopPropagation() + this.uppy.emit('droptarget:drop', event, this) clearTimeout(this.removeDragOverClassTimeout) // 2. Remove dragover class - event.currentTarget.classList.remove('uppy-is-drag-over') + event.currentTarget.classList.remove(this.activeClass) this.setPluginState({ isDraggingOver: false }) // 3. Add all dropped files @@ -60,12 +66,13 @@ module.exports = class DropTarget extends BasePlugin { this.uppy.log(error, 'error') } getDroppedFiles(event.dataTransfer, { logDropError }) - .then((files) => this.addFiles(files)) + .then((files) => this.addFiles(files, event)) } handleDragOver = (event) => { event.preventDefault() event.stopPropagation() + this.uppy.emit('droptarget:dragover', event, this) // 1. Add a small (+) icon on drop // (and prevent browsers from interpreting this as files being _moved_ into the browser, @@ -73,13 +80,14 @@ module.exports = class DropTarget extends BasePlugin { event.dataTransfer.dropEffect = 'copy' clearTimeout(this.removeDragOverClassTimeout) - event.currentTarget.classList.add('uppy-is-drag-over') + event.currentTarget.classList.add(this.activeClass) this.setPluginState({ isDraggingOver: true }) } handleDragLeave = (event) => { event.preventDefault() event.stopPropagation() + this.uppy.emit('droptarget:dragleave', event, this) const { currentTarget } = event @@ -87,7 +95,7 @@ module.exports = class DropTarget extends BasePlugin { // Timeout against flickering, this solution is taken from drag-drop library. // Solution with 'pointer-events: none' didn't work across browsers. this.removeDragOverClassTimeout = setTimeout(() => { - currentTarget.classList.remove('uppy-is-drag-over') + currentTarget.classList.remove(this.activeClass) this.setPluginState({ isDraggingOver: false }) }, 50) } diff --git a/packages/@uppy/drop-target/types/index.d.ts b/packages/@uppy/drop-target/types/index.d.ts index 5f0ed9579e..0cf7e61e5e 100644 --- a/packages/@uppy/drop-target/types/index.d.ts +++ b/packages/@uppy/drop-target/types/index.d.ts @@ -2,6 +2,9 @@ import type { PluginOptions, BasePlugin } from '@uppy/core' interface DropTargetOptions extends PluginOptions { target: string | Element + activeClass?: string + setMeta?: (file: File, event: DragEvent) => Record + } } declare class DropTarget extends BasePlugin {}