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

Try it live

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.

Docs

UI Elements

Sources

Destinations

File Processing

Miscellaneous

React

Other Integrations

Contributing

Informer

Installation

CSS

Options

`id: 'Informer'`

`target: null`