Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
Miscellaneous
React
- Introduction
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
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”.
import DropTarget from '@uppy/drop-target' uppy.use(DropTarget, { target: document.body, }) |
Installation
This plugin is published as the @uppy/drop-target
package.
Install from NPM:
npm install @uppy/drop-target |
In the CDN package, the plugin class is available on the Uppy
global object:
const DragDrop = Uppy.DropTarget |
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.
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:
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
event handler.
onDrop(event)
Callback for the ondrop
event handler.
onDragLeave(event)
Callback for the ondragleave
event handler.