Informer
The @uppy/informer plugin is a pop-up bar for showing notifications for the
Dashboard. When plugins have some exciting news (or errors)
to share, they can with Informer
When should I use it?
When you use the Dashboard it’s already included by default. This plugin is published separately but made specifically for the Dashboard. You can technically use it without it, but it’s not officially supported.
Install
- NPM
- Yarn
- CDN
npm install @uppy/informer
yarn add @uppy/informer
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.13.3/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, Informer } from "https://releases.transloadit.com/uppy/v4.13.3/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(Informer, { target: '#informer' })
</script>
Use
import Uppy from '@uppy/core';
import Informer from '@uppy/informer';
// The `@uppy/informer` plugin includes some basic styles.
// You can also choose not to use it and provide your own styles instead.
import '@uppy/core/dist/style.min.css';
import '@uppy/informer/dist/style.min.css';
new Uppy().use(Informer, { target: '#informer' });
Informer gets its data from uppy.state.info, which is updated by various
plugins via uppy.info method.
In the compressor plugin we use it like this for instance:
const size = prettierBytes(totalCompressedSize);
this.uppy.info(this.i18n('compressedX', { size }), 'info');
When calling uppy.info, Uppy emits
info-visible and will emit
info-hidden after the timeout.
API
Options
id
A unique identifier for this plugin (string, default: 'Informer').
Use this if you need several Informer instances.
target
DOM element, CSS selector, or plugin to mount the Informer into (string or
Element, default: null).