From 550bc6fee36ce5929aba5606e25ef0f24c347b8e Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Tue, 17 Jan 2023 15:16:36 +0100 Subject: [PATCH 1/5] Port `@uppy/drop-target` docs --- docs/user-interfaces/elements/drop-target.mdx | 117 ++++++++++++++++++ 1 file changed, 117 insertions(+) diff --git a/docs/user-interfaces/elements/drop-target.mdx b/docs/user-interfaces/elements/drop-target.mdx index fbcc4dfed..f8f03a236 100644 --- a/docs/user-interfaces/elements/drop-target.mdx +++ b/docs/user-interfaces/elements/drop-target.mdx @@ -1 +1,118 @@ +--- +sidebar_position: 2 +--- + +import Tabs from '@theme/Tabs'; +import TabItem from '@theme/TabItem'; + +import UppyCdnExample from '/src/components/UppyCdnExample'; + # Drop target + +The `@uppy/drop-target` plugin lets your users drag-and-drop files on any +element on the page, for example the whole page, `document.body`. + +Can be used together with Uppy Dashboard or Drag & Drop plugins, or your custom +solution, including plain text “please drop files here”. + +```js +import DropTarget from '@uppy/drop-target'; + +uppy.use(DropTarget, { + target: document.body, +}); +``` + +:::tip + +[Try out the live example](/examples) or take it for a spin in +[CodeSandbox](https://codesandbox.io/s/uppy-drag-drop-gyewzx?file=/src/index.js). + +::: + +## Installation + +This plugin is published as the `@uppy/drop-target` package on the npm registry. + + + + +```shell +npm install @uppy/drop-target +``` + + + + + +```shell +yarn add @uppy/drop-target +``` + + + + + + {` + import { DropTarget } from "{{UPPY_JS_URL}}" + const DropTarget = new Uppy().use(DropTarget) + `} + + + + +## Use + +This module has one default export: the `RemoteSources` plugin class. + +## CSS + +The `@uppy/drop-target` plugin includes some basic styles for +`uppy-is-drag-over` CSS class name. You can also choose not to use it and +provide your own styles instead. + +```js +import '@uppy/core/dist/style.css'; +import '@uppy/drop-target/dist/style.css'; +``` + +Import general Core styles from `@uppy/core/dist/style.css` first, then add the +Drag & Drop styles from `@uppy/drop-target/dist/style.css`. A minified version +is also available as `style.min.css` at the same path. The way to do import +depends on your build system. + +## Options + +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)` + +Event listener for the [`dragover` event][]. + +### `onDrop(event)` + +Event listener for the [`drop` event][]. + +### `onDragLeave(event)` + +Event listener for the [`dragleave` event][]. + +[`dragover` event]: + https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event +[`dragleave` event]: + https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragleave_event +[`drop` event]: + https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/drop_event From 6f8d23d5e3a2b9b935d7e57259f47791629919d7 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Thu, 19 Jan 2023 14:47:57 +0100 Subject: [PATCH 2/5] Apply suggestions from code review --- docs/user-interfaces/elements/drop-target.mdx | 60 +++++++------------ 1 file changed, 23 insertions(+), 37 deletions(-) diff --git a/docs/user-interfaces/elements/drop-target.mdx b/docs/user-interfaces/elements/drop-target.mdx index f8f03a236..59f22fd61 100644 --- a/docs/user-interfaces/elements/drop-target.mdx +++ b/docs/user-interfaces/elements/drop-target.mdx @@ -15,14 +15,6 @@ element on the page, for example the whole page, `document.body`. Can be used together with Uppy Dashboard or Drag & Drop plugins, or your custom solution, including plain text “please drop files here”. -```js -import DropTarget from '@uppy/drop-target'; - -uppy.use(DropTarget, { - target: document.body, -}); -``` - :::tip [Try out the live example](/examples) or take it for a spin in @@ -30,7 +22,12 @@ uppy.use(DropTarget, { ::: -## Installation +## When should I use this? + +When you want to allow users to drag and drop files in your own UI, rather than +in the [`Dashboard`](../dashboard) UI. + +## Install This plugin is published as the `@uppy/drop-target` package on the npm registry. @@ -63,52 +60,41 @@ yarn add @uppy/drop-target ## Use -This module has one default export: the `RemoteSources` plugin class. - -## CSS +This module has one default export: the `DropTarget` plugin class. -The `@uppy/drop-target` plugin includes some basic styles for -`uppy-is-drag-over` CSS class name. You can also choose not to use it and -provide your own styles instead. +```js {8-10} showLineNumbers +import Uppy from '@uppy/core'; +import DropTarget from '@uppy/drop-target'; -```js import '@uppy/core/dist/style.css'; import '@uppy/drop-target/dist/style.css'; -``` - -Import general Core styles from `@uppy/core/dist/style.css` first, then add the -Drag & Drop styles from `@uppy/drop-target/dist/style.css`. A minified version -is also available as `style.min.css` at the same path. The way to do import -depends on your build system. - -## Options - -The `@uppy/drop-target` plugin has the following configurable options: -```js +const uppy = new Uppy(); uppy.use(DropTarget, { - target: null, - onDragOver: (event) => {}, - onDrop: (event) => {}, - onDragLeave: (event) => {}, + target: document.body, }); ``` -### `target: null` +## API + +### Options -DOM element or CSS selector to attach the drag and drop listeners to. +#### `onDragLeave(event)` -### `onDragOver(event)` +Event listener for the [`dragleave` event][]. + +#### `onDragOver(event)` Event listener for the [`dragover` event][]. -### `onDrop(event)` +#### `onDrop(event)` Event listener for the [`drop` event][]. -### `onDragLeave(event)` +#### `target` -Event listener for the [`dragleave` event][]. +DOM element, CSS selector, or plugin to place the drag and drop area into +(`string`, `Element`, `Function`, or `UIPlugin`, default: `null`). [`dragover` event]: https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/dragover_event From 88bae4817e1e51fcbb5e5f3eb558c6e5bcf6b726 Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Thu, 19 Jan 2023 16:55:15 +0100 Subject: [PATCH 3/5] Apply suggestions from code review Co-authored-by: Merlijn Vos --- docs/user-interfaces/elements/drop-target.mdx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/user-interfaces/elements/drop-target.mdx b/docs/user-interfaces/elements/drop-target.mdx index 59f22fd61..69a5a73b8 100644 --- a/docs/user-interfaces/elements/drop-target.mdx +++ b/docs/user-interfaces/elements/drop-target.mdx @@ -13,7 +13,7 @@ The `@uppy/drop-target` plugin lets your users drag-and-drop files on any element on the page, for example the whole page, `document.body`. Can be used together with Uppy Dashboard or Drag & Drop plugins, or your custom -solution, including plain text “please drop files here”. +solution targeting any DOM element. :::tip @@ -29,7 +29,6 @@ in the [`Dashboard`](../dashboard) UI. ## Install -This plugin is published as the `@uppy/drop-target` package on the npm registry. From bdbe5ce13935d0e3794f99838e33518101465ada Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Tue, 24 Jan 2023 20:31:04 +0100 Subject: [PATCH 4/5] Update docs/user-interfaces/elements/drop-target.mdx Co-authored-by: Artur Paikin --- docs/user-interfaces/elements/drop-target.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/user-interfaces/elements/drop-target.mdx b/docs/user-interfaces/elements/drop-target.mdx index 69a5a73b8..1bcca57a3 100644 --- a/docs/user-interfaces/elements/drop-target.mdx +++ b/docs/user-interfaces/elements/drop-target.mdx @@ -25,7 +25,7 @@ solution targeting any DOM element. ## When should I use this? When you want to allow users to drag and drop files in your own UI, rather than -in the [`Dashboard`](../dashboard) UI. +in the [`Dashboard`](../dashboard) UI, or catch dropped files from anywhere on the page. ## Install From 36f4c809e20c8da4ca860d0f2cffa2418ebabe5a Mon Sep 17 00:00:00 2001 From: Antoine du Hamel Date: Tue, 24 Jan 2023 20:44:07 +0100 Subject: [PATCH 5/5] Apply suggestions from code review --- docs/user-interfaces/elements/drop-target.mdx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/docs/user-interfaces/elements/drop-target.mdx b/docs/user-interfaces/elements/drop-target.mdx index 1bcca57a3..b7af7c649 100644 --- a/docs/user-interfaces/elements/drop-target.mdx +++ b/docs/user-interfaces/elements/drop-target.mdx @@ -25,11 +25,11 @@ solution targeting any DOM element. ## When should I use this? When you want to allow users to drag and drop files in your own UI, rather than -in the [`Dashboard`](../dashboard) UI, or catch dropped files from anywhere on the page. +in the [`Dashboard`](../dashboard) UI, or catch dropped files from anywhere on +the page. ## Install - @@ -78,15 +78,24 @@ uppy.use(DropTarget, { ### Options -#### `onDragLeave(event)` +#### `onDragLeave` Event listener for the [`dragleave` event][]. -#### `onDragOver(event)` +```js {3-5} showLineNumbers +uppy.use(DropTarget, { + target: document.body, + onDragLeave: (event) => { + event.stopPropagation(); + }, +}); +``` + +#### `onDragOver` Event listener for the [`dragover` event][]. -#### `onDrop(event)` +#### `onDrop` Event listener for the [`drop` event][].