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
Common Plugin Options
Each plugin can have any number of options (please see specific plugins for details), but these are shared between some:
id
A unique string identifying the plugin. By default, the plugin’s name is used, so usually it does not need to be configured manually. Use this if you need to add several plugins of the same type.
target
Can be a string
CSS selector, a DOM element, or a Plugin class. Consider the following example, where DragDrop
plugin will be rendered into a body
element:
import Uppy from '@uppy/core' import DragDrop from '@uppy/drag-drop' const uppy = new Uppy() uppy.use(DragDrop, { target: 'body' }) // or: uppy.use(DragDrop, { target: document.body }) |
While in this one, we are using the @uppy/dashboard
plugin, which can act as a host target for other plugins:
import Uppy from '@uppy/core' import Dashboard from '@uppy/dashboard' import GoogleDrive from '@uppy/google-drive' const uppy = new Uppy() uppy.use(Dashboard, { trigger: '#uppyModalOpener', }) uppy.use(GoogleDrive, { target: Dashboard }) |
In the example above, the Dashboard
gets rendered into an element with ID uppy
, while GoogleDrive
is rendered into the Dashboard
itself.
locale: {}
Same as with Uppy’s setting above, this allows you to override plugin’s locale string, so that instead of Select files
in English, your users will see Выберите файлы
in Russian. Example:
uppy.use(FileInput, { target: 'body', locale: { strings: { selectToUpload: 'Выберите файл для загрузки' }, }, }) |
See plugin documentation pages for other plugin-specific options.
Methods
setOptions(opts)
You can change options for a plugin on the fly, like this:
// First get the plugin by its `id`, // then change, for example, `width` on the fly uppy.getPlugin('Dashboard').setOptions({ width: 300, }) |
⚠️ This should work for most options, except for
limit
and some others related to an upload. This is because some objects/instances are created at once upon initialization, and not updated later.
Provider Plugins
See the Provider Plugins documentation page for information on provider plugins.