Status bar
The @uppy/status-bar
plugin shows upload progress and speed, estimated time,
pre- and post-processing information, and allows users to control
(pause/resume/cancel) the upload.
tip
Try it out together with @uppy/drag-drop
in
StackBlitz
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 still use it without it but it may need some (CSS) tweaking for your use case.
Install
- NPM
- Yarn
- CDN
npm install @uppy/status-bar
yarn add @uppy/status-bar
caution
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/v3.25.2/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, StatusBar } from "https://releases.transloadit.com/uppy/v3.25.2/uppy.min.mjs"
const uppy = new Uppy()
uppy.use(StatusBar, { target: '#status-bar' })
</script>
Use
import Uppy from '@uppy/core';
import StatusBar from '@uppy/status-bar';
import '@uppy/core/dist/style.min.css';
import '@uppy/status-bar/dist/style.min.css';
new Uppy().use(StatusBar, { target: '#status-bar' });