Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Expose @uppy/drop-target events #3238

Merged
merged 1 commit into from Oct 5, 2021
Merged

Expose @uppy/drop-target events #3238

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
11 changes: 8 additions & 3 deletions packages/@uppy/drop-target/src/index.js
View file
Open in desktop
Expand Up @@ -45,7 +45,7 @@ module.exports = class DropTarget extends BasePlugin {
}
}

handleDrop = (event) => {
handleDrop = async (event) => {
event.preventDefault()
event.stopPropagation()
clearTimeout(this.removeDragOverClassTimeout)
Expand All @@ -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)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we pass the files here?

Suggested change
this.opts.onDrop?.(event)
this.opts.onDrop?.(event, files)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I thought about it but I didn't in the end.

  • It's inconsistent with what we pass in the other events in this plugin, but also with the events in other plugins
  • files here is not the same as this.uppy.getState().files, it is not processed yet so it missing important things like id.
  • the idea of these events is that it can be used for any side effect, so the developer can access whatever they want from the uppy instance should they need it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, good point about these being unprocessed files especially.

}

handleDragOver = (event) => {
Expand All @@ -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) => {
Expand All @@ -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 = () => {
Expand Down
5 changes: 4 additions & 1 deletion packages/@uppy/drop-target/types/index.d.ts
View file
Open in desktop
@@ -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> {}
Expand Down
4 changes: 4 additions & 0 deletions packages/@uppy/drop-target/types/index.test-d.ts
View file
Open in desktop
Expand Up @@ -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,
})
}
21 changes: 21 additions & 0 deletions website/src/docs/drop-target.md
View file
Open in desktop
Expand Up @@ -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