@uppy/informer

What is @uppy/informer?

@uppy/informer is a plugin for the Uppy file uploader that provides a way to display notifications and messages to users. It is used to inform users about the status of their file uploads, such as success, failure, or progress updates.

What are @uppy/informer's main functionalities?

Display Success Message

This feature allows you to display a success message when a file upload is successful. The message will be shown for 5 seconds.

const Uppy = require('@uppy/core');
const Informer = require('@uppy/informer');

const uppy = Uppy();
uppy.use(Informer, {
  target: 'body',
  timeout: 5000
});

uppy.on('upload-success', (file, response) => {
  uppy.info('Upload successful!', 'success', 5000);
});

Display Error Message

This feature allows you to display an error message when a file upload fails. The error message will be shown for 5 seconds.

const Uppy = require('@uppy/core');
const Informer = require('@uppy/informer');

const uppy = Uppy();
uppy.use(Informer, {
  target: 'body',
  timeout: 5000
});

uppy.on('upload-error', (file, error, response) => {
  uppy.info('Upload failed: ' + error.message, 'error', 5000);
});

Display Informational Message

This feature allows you to display an informational message when a file upload starts. The message will be shown for 5 seconds.

const Uppy = require('@uppy/core');
const Informer = require('@uppy/informer');

const uppy = Uppy();
uppy.use(Informer, {
  target: 'body',
  timeout: 5000
});

uppy.on('upload-started', (file) => {
  uppy.info('Upload started for ' + file.name, 'info', 5000);
});

Other packages similar to @uppy/informer

notyf

Notyf is a minimalistic, responsive, and customizable JavaScript notification library. It provides similar functionality to @uppy/informer by allowing you to display success, error, and informational messages. Notyf is more general-purpose and can be used outside of file upload contexts.

toastr

Toastr is a JavaScript library for non-blocking notifications. It provides a simple API to display success, error, warning, and info messages. Toastr is highly customizable and can be used in a variety of applications, not just for file uploads.

sweetalert2

SweetAlert2 is a beautiful, responsive, customizable, and accessible replacement for JavaScript's popup boxes. It can be used to display alerts, including success, error, and informational messages. SweetAlert2 offers more advanced features like modals and user input forms, making it more versatile than @uppy/informer.

README

@uppy/informer

The Informer is a pop-up bar for showing notifications. When other plugins have some exciting news (or error) to share, they can show a notification here.

Uppy is being developed by the folks at Transloadit, a versatile file encoding service.

Example

import Uppy from '@uppy/core'
import Informer from '@uppy/informer'

const uppy = new Uppy()
uppy.use(Informer, {
  target: '#mount-point',
})

Installation

$ npm install @uppy/informer

Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Smart CDN. In that case Uppy will attach itself to the global window.Uppy object. See the main Uppy documentation for instructions.

Documentation

Documentation for this plugin can be found on the Uppy website.

License

The MIT License.

Changelog

4.2.1

Released: 2024-08-26

| Package | Version | Package | Version | | ----------- | ------- | ----------- | ------- | | @uppy/react | 4.0.2 | uppy | 4.2.1 |

• @uppy/react: fix use-sync-external-store import (Merlijn Vos / #5426)
• docs: fix Golden Retriever service worker import (mkabatek / #5425)