Drag & Drop
The @uppy/drag-drop plugin renders a drag and drop area for file selection.
Try out the live example or take it for a spin in StackBlitz.
When should I use this?
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, or the Dashboard is too much. But it can be too minimal too. By default it doesn’t show that a file has been added nor is there a progress bar.
Install
- NPM
- Yarn
- CDN
npm install @uppy/core @uppy/drag-drop
yarn add @uppy/core @uppy/drag-drop
The bundle consists of most Uppy plugins, so this method is not recommended for production, as your users will have to download all plugins when you are likely using only a few.
It can be useful to speed up your development environment, so don't hesitate to use it to get you started.
<!-- 1. Add CSS to `<head>` -->
<link href="https://releases.transloadit.com/uppy/v4.8.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, DragDrop } from "https://releases.transloadit.com/uppy/v4.8.0/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(DragDrop, { target: '#uppy' })
</script>
Use
import Uppy from '@uppy/core';
import DragDrop from '@uppy/drag-drop';
import '@uppy/core/dist/style.min.css';
import '@uppy/drag-drop/dist/style.min.css';
new Uppy().use(DragDrop, { target: '#drag-drop' });
Certain restrictions set in Uppy’s options, namely
maxNumberOfFiles and allowedFileTypes, affect the system file picker dialog.
If maxNumberOfFiles: 1, users will only be able to select one file, and
allowedFileTypes: ['video/*', '.gif'] means only videos or gifs (files with
.gif extension) will be selectable.
API
Options
id
A unique identifier for this plugin (string, Default: 'DragDrop').
Use this if you need to add several DragDrop instances.
target
DOM element, CSS selector, or plugin to place the drag and drop area into
(string or Element, default: null).
width
Drag and drop area width (string, default: '100%').
Set in inline CSS, so feel free to use percentage, pixels or other values that you like.
height
Drag and drop area height (string, default: '100%').
Set in inline CSS, so feel free to use percentage, pixels or other values that you like.
note
Optionally, specify a string of text that explains something about the upload
for the user (string, default: null).
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.