From 0ef42d1ff7e9d2e3ad9672a6d057a5d2f343f9ea Mon Sep 17 00:00:00 2001
From: Merlijn Vos <merlijn@soverin.net>
Date: Tue, 5 Oct 2021 17:04:43 +0200
Subject: [PATCH] Expose `@uppy/drop-target` events (#3238)

---
 packages/@uppy/drop-target/src/index.js       | 11 +++++++---
 packages/@uppy/drop-target/types/index.d.ts   |  5 ++++-
 .../@uppy/drop-target/types/index.test-d.ts   |  4 ++++
 website/src/docs/drop-target.md               | 21 +++++++++++++++++++
 4 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages/@uppy/drop-target/src/index.js b/packages/@uppy/drop-target/src/index.js
index fe6c421702..ae00366028 100644
--- a/packages/@uppy/drop-target/src/index.js
+++ b/packages/@uppy/drop-target/src/index.js
@@ -45,7 +45,7 @@ module.exports = class DropTarget extends BasePlugin {
     }
   }
 
-  handleDrop = (event) => {
+  handleDrop = async (event) => {
     event.preventDefault()
     event.stopPropagation()
     clearTimeout(this.removeDragOverClassTimeout)
@@ -56,11 +56,14 @@ module.exports = class DropTarget extends BasePlugin {
 
     // 3. Add all dropped files
     this.uppy.log('[DropTarget] Files were dropped')
+
     const logDropError = (error) => {
       this.uppy.log(error, 'error')
     }
-    getDroppedFiles(event.dataTransfer, { logDropError })
-      .then((files) => this.addFiles(files))
+
+    const files = await getDroppedFiles(event.dataTransfer, { logDropError })
+    this.addFiles(files)
+    this.opts.onDrop?.(event)
   }
 
   handleDragOver = (event) => {
@@ -75,6 +78,7 @@ module.exports = class DropTarget extends BasePlugin {
     clearTimeout(this.removeDragOverClassTimeout)
     event.currentTarget.classList.add('uppy-is-drag-over')
     this.setPluginState({ isDraggingOver: true })
+    this.opts.onDragOver?.(event)
   }
 
   handleDragLeave = (event) => {
@@ -90,6 +94,7 @@ module.exports = class DropTarget extends BasePlugin {
       currentTarget.classList.remove('uppy-is-drag-over')
       this.setPluginState({ isDraggingOver: false })
     }, 50)
+    this.opts.onDragLeave?.(event)
   }
 
   addListeners = () => {
diff --git a/packages/@uppy/drop-target/types/index.d.ts b/packages/@uppy/drop-target/types/index.d.ts
index 5f0ed9579e..1688a7cae3 100644
--- a/packages/@uppy/drop-target/types/index.d.ts
+++ b/packages/@uppy/drop-target/types/index.d.ts
@@ -1,7 +1,10 @@
 import type { PluginOptions, BasePlugin } from '@uppy/core'
 
 interface DropTargetOptions extends PluginOptions {
-    target: string | Element
+  target: string | Element;
+  onDragOver?: (event: MouseEvent) => void;
+  onDrop?: (event: MouseEvent) => void;
+  onDragLeave?: (event: MouseEvent) => void;
 }
 
 declare class DropTarget extends BasePlugin<DropTargetOptions> {}
diff --git a/packages/@uppy/drop-target/types/index.test-d.ts b/packages/@uppy/drop-target/types/index.test-d.ts
index c60a3b1891..c3897de059 100644
--- a/packages/@uppy/drop-target/types/index.test-d.ts
+++ b/packages/@uppy/drop-target/types/index.test-d.ts
@@ -3,7 +3,11 @@ import DropTarget from '..'
 
 {
   const uppy = new Uppy()
+
   uppy.use(DropTarget, {
     target: 'body',
+    onDragOver: (event) => event.clientX,
+    onDrop: (event) => event.clientX,
+    onDragLeave: (event) => event.clientX,
   })
 }
diff --git a/website/src/docs/drop-target.md b/website/src/docs/drop-target.md
index 48efcaae94..92a7b04f53 100644
--- a/website/src/docs/drop-target.md
+++ b/website/src/docs/drop-target.md
@@ -57,9 +57,30 @@ The `@uppy/drop-target` plugin has the following configurable options:
 ```js
 uppy.use(DropTarget, {
   target: null,
+  onDragOver: (event) => {},
+  onDrop: (event) => {},
+  onDragLeave: (event) => {},
 })
 ```
 
 ### `target: null`
 
 DOM element or CSS selector to attach the drag and drop listeners to.
+
+### `onDragOver(event)`
+
+Callback for the [`ondragover`][ondragover] event handler.
+
+### `onDrop(event)`
+
+Callback for the [`ondrop`][ondrop] event handler.
+
+### `onDragLeave(event)`
+
+Callback for the [`ondragleave`][ondragleave] event handler.
+
+<!-- definitions -->
+
+[ondragover]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragover
+[ondragleave]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondragleave
+[ondrop]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ondrop