Expose drag-drop events (#2914)

* Expose drag-drop events

* we need to call DragDrop.renderArrowSvg without this, since it’s now static

* Update docs based on feedback

Co-authored-by: Artur Paikin <artur@arturpaikin.com>

packages/@uppy/drag-drop/src/index.js

@@ -5,12 +5,14 @@ const isDragDropSupported = require('@uppy/utils/lib/isDragDropSupported')
 const getDroppedFiles = require('@uppy/utils/lib/getDroppedFiles')
 const { h } = require('preact')
 
+const { version } = require('../package.json')
+
 /**
  * Drag & Drop plugin
  *
  */
 module.exports = class DragDrop extends Plugin {
-  static VERSION = require('../package.json').version
+  static VERSION = version
 
   constructor (uppy, opts) {
     super(uppy, opts)
@@ -95,10 +97,13 @@ module.exports = class DragDrop extends Plugin {
     // ___Why not use value="" on <input/> instead?
     //    Because if we use that method of clearing the input,
     //    Chrome will not trigger change if we drop the same file twice (Issue #768).
+    // eslint-disable-next-line no-param-reassign
     event.target.value = null
   }
 
-  handleDrop (event, dropCategory) {
+  handleDrop (event) {
+    if (this.opts.onDrop) this.opts.onDrop(event)
+
     event.preventDefault()
     event.stopPropagation()
     clearTimeout(this.removeDragOverClassTimeout)
@@ -116,11 +121,15 @@ module.exports = class DragDrop extends Plugin {
   }
 
   handleDragOver (event) {
+    if (this.opts.onDragOver) this.opts.onDragOver(event)
     event.preventDefault()
     event.stopPropagation()
 
     // 1. Add a small (+) icon on drop
-    // (and prevent browsers from interpreting this as files being _moved_ into the browser, https://github.com/transloadit/uppy/issues/1978)
+    // (and prevent browsers from interpreting this as files being _moved_ into the browser
+    // https://github.com/transloadit/uppy/issues/1978)
+    //
+    // eslint-disable-next-line no-param-reassign
     event.dataTransfer.dropEffect = 'copy'
 
     clearTimeout(this.removeDragOverClassTimeout)
@@ -128,18 +137,20 @@ module.exports = class DragDrop extends Plugin {
   }
 
   handleDragLeave (event) {
+    if (this.opts.onDragLeave) this.opts.onDragLeave(event)
     event.preventDefault()
     event.stopPropagation()
 
     clearTimeout(this.removeDragOverClassTimeout)
-    // Timeout against flickering, this solution is taken from drag-drop library. Solution with 'pointer-events: none' didn't work across browsers.
+    // Timeout against flickering, this solution is taken from drag-drop library.
+    // Solution with 'pointer-events: none' didn't work across browsers.
     this.removeDragOverClassTimeout = setTimeout(() => {
       this.setPluginState({ isDraggingOver: false })
     }, 50)
   }
 
   renderHiddenFileInput () {
-    const restrictions = this.uppy.opts.restrictions
+    const { restrictions } = this.uppy.opts
     return (
       <input
         className="uppy-DragDrop-input"
@@ -154,7 +165,7 @@ module.exports = class DragDrop extends Plugin {
     )
   }
 
-  renderArrowSvg () {
+  static renderArrowSvg () {
     return (
       <svg aria-hidden="true" focusable="false" className="uppy-c-icon uppy-DragDrop-arrow" width="16" height="16" viewBox="0 0 16 16">
         <path d="M11 10V0H5v10H2l6 6 6-6h-3zm0 0" fillRule="evenodd" />
@@ -178,7 +189,7 @@ module.exports = class DragDrop extends Plugin {
     )
   }
 
-  render (state) {
+  render () {
     const dragDropClass = `uppy-Root
       uppy-u-reset
       uppy-DragDrop-container
@@ -203,7 +214,7 @@ module.exports = class DragDrop extends Plugin {
       >
         {this.renderHiddenFileInput()}
         <div className="uppy-DragDrop-inner">
-          {this.renderArrowSvg()}
+          {DragDrop.renderArrowSvg()}
           {this.renderLabel()}
           {this.renderNote()}
         </div>
@@ -212,10 +223,12 @@ module.exports = class DragDrop extends Plugin {
   }
 
   install () {
+    const { target } = this.opts
+
     this.setPluginState({
       isDraggingOver: false,
     })
-    const target = this.opts.target
+
     if (target) {
       this.mount(target, this)
     }

packages/@uppy/drag-drop/types/index.d.ts

@@ -11,6 +11,9 @@ declare module DragDrop {
     height?: string | number
     note?: string
     locale?: DragDropLocale
+    onDragOver?: (event: MouseEvent) => void
+    onDragLeave?: (event: MouseEvent) => void
+    onDrop?: (event: MouseEvent) => void
   }
 }
 

packages/@uppy/drag-drop/types/index.test-d.ts

@@ -1,2 +1,26 @@
-import DragDrop = require('../')
-// TODO implement
+import Uppy = require("@uppy/core");
+
+import DragDrop = require("../");
+
+{
+  const uppy = Uppy<Uppy.StrictTypes>();
+
+  uppy.use(DragDrop, {
+    replaceTargetContent: true,
+    target: "body",
+    inputName: "test",
+    allowMultipleFiles: true,
+    width: 100,
+    height: "100",
+    note: "note",
+    locale: {
+      strings: {
+        dropHereOr: "test",
+        browse: "test"
+      }
+    },
+    onDragOver: event => event.clientX,
+    onDragLeave: event => event.clientY,
+    onDrop: event => event
+  });
+}

website/src/docs/dragdrop.md

@@ -88,6 +88,18 @@ Optionally, specify a string of text that explains something about the upload fo
 
 Localize text that is shown to the user.
 
+### `onDragOver(event)`
+
+Callback for the [`ondragover`][ondragover] event handler.
+
+### `onDragLeave(event)`
+
+Callback for the [`ondragleave`][ondragleave] event handler.
+
+### `onDrop(event)`
+
+Callback for the [`ondrop`][ondrop] event handler.
+
 The default English strings are:
 
 ```js
@@ -99,3 +111,9 @@ strings: {
   browse: 'browse'
 }
 ```
+
+<!-- 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