Flag of Ukraine   We stand with the brave people of Ukraine. Stop the war. Find out how you can help.


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

Try it live

The Informer plugin is included in the Dashboard by default.


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


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.


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.