Skip to main content

Uppy 4.0 is here: TypeScript rewrite, Google Photos, React hooks, and much more.

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 install @uppy/informer

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).