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
Drag & Drop
The @uppy/drag-drop
plugin renders a drag and drop area for file selection. it can be useful when you only want the local device as a file source, don’t need file previews and a UI for metadata editing, and the Dashboard feels like overkill.
import DragDrop from '@uppy/drag-drop' uppy.use(DragDrop, { // Options }) |
Installation
This plugin is published as the @uppy/drag-drop
package.
Install from NPM:
npm install @uppy/drag-drop |
In the CDN package, the plugin class is available on the Uppy
global object:
const { DragDrop } = Uppy |
CSS
The @uppy/drag-drop
plugin includes some basic styles, like shown in the example. You can also choose not to use it and provide your own styles instead.
import '@uppy/core/dist/style.css' import '@uppy/drag-drop/dist/style.css' |
Import general Core styles from @uppy/core/dist/style.css
first, then add the Drag & Drop styles from @uppy/drag-drop/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/drag-drop
plugin has the following configurable options:
uppy.use(DragDrop, { target: null, width: '100%', height: '100%', note: null, locale: {}, }) |
Note that certain restrictions set in Uppy’s main options, namely
maxNumberOfFiles
andallowedFileTypes
, affect the system file picker dialog. IfmaxNumberOfFiles: 1
, users will only be able to select one file, andallowedFileTypes: ['video/*', '.gif']
means only videos or gifs (files with.gif
extension) will be selectable.
id: 'DragDrop'
A unique identifier for this plugin. It defaults to 'DragDrop'
. Use this if you need to add several DragDrop instances.
target: null
DOM element, CSS selector, or plugin to place the drag and drop area into.
width: '100%'
Drag and drop area width, set in inline CSS, so feel free to use percentage, pixels or other values that you like.
height: '100%'
Drag and drop area height, set in inline CSS, so feel free to use percentage, pixels or other values that you like.
note: null
Optionally, specify a string of text that explains something about the upload for the user. This is a place to explain any restrictions
that are put in place. For example: 'Images and video only, 2–3 files, up to 1 MB'
.
locale: {}
export default { strings: { // Text to show on the droppable area. // `%{browse}` is replaced with a link that opens the system file selection dialog. dropHereOr: 'Drop here or %{browse}', // Used as the label for the link that opens the system file selection dialog. browse: 'browse', }, } |
onDragOver(event)
Callback for the ondragover
event handler.
onDragLeave(event)
Callback for the ondragleave
event handler.
onDrop(event)
Callback for the ondrop
event handler.
The default English strings are:
const strings = { // Text to show on the droppable area. // `%{browse}` is replaced with a link that opens the system file selection dialog. dropHereOr: 'Drop here or %{browse}', // Used as the label for the link that opens the system file selection dialog. browse: 'browse', } |