From 6500a19aefae093a4a522c2d4b0e5d8e91f7b55b Mon Sep 17 00:00:00 2001 From: Tobias Pyndt Steinmann Date: Wed, 16 Jun 2021 11:39:29 +0200 Subject: [PATCH 1/4] Added new option activeClass for customizing the class added to target on dragover. Added new option setMeta to enable setting specific meta fields depending on the drop event. This enables using one DropTarget with body as target with the meta fields being set depending on which DOM element the files was dropped. --- packages/@uppy/drop-target/src/index.js | 37 +++++++++++++-------- packages/@uppy/drop-target/types/index.d.ts | 2 ++ 2 files changed, 26 insertions(+), 13 deletions(-) diff --git a/packages/@uppy/drop-target/src/index.js b/packages/@uppy/drop-target/src/index.js index 95081dc890..6b899362aa 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 Plugin { 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,24 @@ module.exports = class DropTarget extends Plugin { this.removeDragOverClassTimeout = null } - addFiles = (files) => { - const descriptors = files.map((file) => ({ - source: this.id, - name: file.name, - type: file.type, - data: file, - meta: { + addFiles = (files, event) => { + const descriptors = files.map((file) => { + const meta = { // path of the file relative to the ancestor directory the user selected. // e.g. 'docs/Old Prague/airbnb.pdf' relativePath: file.relativePath || null, - }, - })) + } + if (this.setMeta instanceof Function) { + Object.assign(meta, this.setMeta(file, event)) + } + return { + source: this.id, + name: file.name, + type: file.type, + data: file, + meta, + } + }) try { this.uppy.addFiles(descriptors) @@ -48,10 +56,11 @@ module.exports = class DropTarget extends Plugin { 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 +69,13 @@ module.exports = class DropTarget extends Plugin { 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 +83,14 @@ module.exports = class DropTarget extends Plugin { 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 +98,7 @@ module.exports = class DropTarget extends Plugin { // 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 b8a04fa4b8..2bfe1b9de1 100644 --- a/packages/@uppy/drop-target/types/index.d.ts +++ b/packages/@uppy/drop-target/types/index.d.ts @@ -3,6 +3,8 @@ import Uppy = require('@uppy/core') declare module DropTarget { interface DropTargetOptions extends Uppy.PluginOptions { target: string | Element + activeClass?: string + setMeta: (file: File, event: DragEvent) => Object } } From 164ef72d7dd0340fdf4b4451980db0635aa1a725 Mon Sep 17 00:00:00 2001 From: Tobias Steinmann Date: Sat, 28 Aug 2021 22:49:09 +0200 Subject: [PATCH 2/4] Update packages/@uppy/drop-target/src/index.js Simplify adding meta fields from setMeta in addFiles function. Co-authored-by: Antoine du Hamel --- packages/@uppy/drop-target/src/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/@uppy/drop-target/src/index.js b/packages/@uppy/drop-target/src/index.js index f999d9bb83..ba2fb2107e 100644 --- a/packages/@uppy/drop-target/src/index.js +++ b/packages/@uppy/drop-target/src/index.js @@ -33,9 +33,7 @@ module.exports = class DropTarget extends BasePlugin { // path of the file relative to the ancestor directory the user selected. // e.g. 'docs/Old Prague/airbnb.pdf' relativePath: file.relativePath || null, - } - if (this.setMeta instanceof Function) { - Object.assign(meta, this.setMeta(file, event)) + ...this.setMeta?.(file, event), } return { source: this.id, From 07a3d2dca3fd1a8cc195b723c203e73edac7b675 Mon Sep 17 00:00:00 2001 From: Tobias Pyndt Steinmann Date: Mon, 30 Aug 2021 13:29:48 +0200 Subject: [PATCH 3/4] Simplify addFiles by reverting to old code with the `...this.setMeta?.(file, event)` added. --- packages/@uppy/drop-target/src/index.js | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/packages/@uppy/drop-target/src/index.js b/packages/@uppy/drop-target/src/index.js index ba2fb2107e..45894934ae 100644 --- a/packages/@uppy/drop-target/src/index.js +++ b/packages/@uppy/drop-target/src/index.js @@ -29,18 +29,17 @@ module.exports = class DropTarget extends BasePlugin { addFiles = (files, event) => { const descriptors = files.map((file) => { - const 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), - } return { source: this.id, name: file.name, type: file.type, data: file, - meta, + 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), + }, } }) From 263ca8de77ff016ab15d483dae565e26a85ff7bb Mon Sep 17 00:00:00 2001 From: Tobias Steinmann Date: Mon, 30 Aug 2021 13:41:45 +0200 Subject: [PATCH 4/4] Update packages/@uppy/drop-target/types/index.d.ts Allow setMeta to be optional. Using more descriptive type for the setMeta option. Co-authored-by: Antoine du Hamel --- packages/@uppy/drop-target/types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@uppy/drop-target/types/index.d.ts b/packages/@uppy/drop-target/types/index.d.ts index 01efe65474..0cf7e61e5e 100644 --- a/packages/@uppy/drop-target/types/index.d.ts +++ b/packages/@uppy/drop-target/types/index.d.ts @@ -3,7 +3,7 @@ import type { PluginOptions, BasePlugin } from '@uppy/core' interface DropTargetOptions extends PluginOptions { target: string | Element activeClass?: string - setMeta: (file: File, event: DragEvent) => Object + setMeta?: (file: File, event: DragEvent) => Record } }