Docs
- Getting Started
- Uppy
- Companion
- Custom Stores
- Contributing
- Stats
-
Plugins
- List & Common Options
- Writing Plugins
-
Local Sources
- Dashboard
- Drag & Drop
- File Input
- Webcam
-
Remote Providers
- Provider Plugins
- Dropbox
- Google Drive
- Import From URL
-
Uploaders
- Tus
- XHR Upload
- AWS S3
- AWS S3 Multipart
-
UI Elements
- Status Bar
- Progress Bar
- Informer
-
File Processing
- Transloadit
-
Miscellaneous
- Form
- Golden Retriever
-
React Components
- Introduction
- <StatusBar />
- <DragDrop />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- Redux
-
Robodog
- Introduction
- File Picker
- Form
- Upload
<DragDrop />
The <DragDrop />
component wraps the @uppy/drag-drop
plugin.
Installation
Install from NPM:
npm install @uppy/react |
import DragDrop from '@uppy/react/lib/DragDrop'; import { DragDrop } from '@uppy/react'; |
CSS
The DragDrop
component includes some simple 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.
Initializing Uppy
Your Uppy instance must be initialized before passing it to an uppy={}
prop, and should be cleaned up using uppy.close()
when you are done with it. A simple approach is to initialize it in your React component’s constructor()
and destroy it in componentWillUnmount()
.
⚠ Uppy instances are stateful, so the same instance must be used across different renders.
Do NOT initialize Uppy in arender()
method!
Do NOT initialize Uppy in a function component!
class MyComponent extends React.Component { constructor (props) { super(props) this.uppy = Uppy() .use(Transloadit, {}) } componentWillUnmount () { this.uppy.close() } render () { return <DragDrop uppy={this.uppy} /> } } |
Props
The <DragDrop />
component supports all [DragDrop][] options as props.
<DragDrop width="100%" height="100%" note="Images up to 200×200px" /> |