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
Informer
The @uppy/informer
plugin is a pop-up bar for showing notifications. When plugins have some exciting news (or error) to share, they can show a notification here.
Informer gets its data from uppy.state.info
, which is updated by various plugins via uppy.info
method.
import Informer from '@uppy/informer' uppy.use(Informer, { // Options }) |
The Informer plugin is included in the Dashboard by default.
Installation
If you are using the
uppy
package, you do not need to install this plugin manually.
This plugin is published as the @uppy/informer
package.
Install from NPM:
npm install @uppy/informer |
In the CDN package, the plugin class is available on the Uppy
global object:
const { Informer } = Uppy |
CSS
The @uppy/informer
plugin requires the following CSS for styling:
import '@uppy/core/dist/style.css' import '@uppy/informer/dist/style.css' |
Import general Core styles from @uppy/core/dist/style.css
first, then add the Informer styles from @uppy/informer/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.
⚠️ If you use the @uppy/dashboard
plugin, you do not need to include the styles for the Progress Bar, because the Dashboard already includes it.
Options
The @uppy/informer
plugin has the following configurable options:
id: 'Informer'
A unique identifier for this plugin. It defaults to 'Informer'
. Use this if you need several Informer
instances.
target: null
DOM element, CSS selector, or plugin to mount the Informer into.