Expose `@uppy/drop-target` events (#3238)

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 = () => {

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> {}

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,
   })
 }

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