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.
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
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/v4.8.0/uppy.min.css" rel="stylesheet">
<!-- 2. Initialize -->
<div id="uppy"></div>
<script type="module">
import { Uppy, StatusBar } from "https://releases.transloadit.com/uppy/v4.8.0/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' });
API
Options
id
A unique identifier for this Status Bar (string, default: 'StatusBar').
Use this if you need to add several StatusBar instances.
target
DOM element, CSS selector, or plugin to place the drag and drop area into
(string, Element, Function, or UIPlugin, default:
Dashboard).
hideAfterFinish
Hide the Status Bar after the upload is complete (boolean, default: true).
showProgressDetails
Display remaining upload size and estimated time (boolean, default: false)
false: Uploading: 45%
true: Uploading: 45%・43 MB of 101 MB・8s left
hideUploadButton
Hide the upload button (boolean, default: false).
Use this if you are providing a custom upload button somewhere, and using the
uppy.upload() API.
hideRetryButton
Hide the retry button (boolean, default: false).
Use this if you are providing a custom retry button somewhere, and using the
uppy.retryAll() or uppy.retryUpload(fileID) API.
hidePauseResumeButton
Hide pause/resume buttons (for resumable uploads, via tus, for
example) (boolean, default: false).
Use this if you are providing custom cancel or pause/resume buttons somewhere,
and using the uppy.pauseResume(fileID) or uppy.removeFile(fileID) API.
hideCancelButton
Hide the cancel button (boolean, default: false).
Use this if you are providing a custom retry button somewhere, and using the
uppy.cancelAll() API.
doneButtonHandler
Status Bar will render a “Done” button in place of pause/resume/cancel buttons,
once the upload/encoding is done (Function, default: null).
The behaviour of this “Done” button is defined by the handler function — can be used to close file picker modals or clear the upload state. This is what the Dashboard plugin, which uses Status Bar internally, sets:
const doneButtonHandler = () => {
this.uppy.reset();
this.requestCloseModal();
};
locale
export default {
strings: {
// Shown in the status bar while files are being uploaded.
uploading: 'Uploading',
// Shown in the status bar once all files have been uploaded.
complete: 'Complete',
// Shown in the status bar if an upload failed.
uploadFailed: 'Upload failed',
// Shown in the status bar while the upload is paused.
paused: 'Paused',
// Used as the label for the button that retries an upload.
retry: 'Retry',
// Used as the label for the button that cancels an upload.
cancel: 'Cancel',
// Used as the label for the button that pauses an upload.
pause: 'Pause',
// Used as the label for the button that resumes an upload.
resume: 'Resume',
// Used as the label for the button that resets the upload state after an upload
done: 'Done',
// When `showProgressDetails` is set, shows the number of files that have been fully uploaded so far.
filesUploadedOfTotal: {
0: '%{complete} of %{smart_count} file uploaded',
1: '%{complete} of %{smart_count} files uploaded',
},
// When `showProgressDetails` is set, shows the amount of bytes that have been uploaded so far.
dataUploadedOfTotal: '%{complete} of %{total}',
// When `showProgressDetails` is set, shows an estimation of how long the upload will take to complete.
xTimeLeft: '%{time} left',
// Used as the label for the button that starts an upload.
uploadXFiles: {
0: 'Upload %{smart_count} file',
1: 'Upload %{smart_count} files',
},
// Used as the label for the button that starts an upload, if another upload has been started in the past
// and new files were added later.
uploadXNewFiles: {
0: 'Upload +%{smart_count} file',
1: 'Upload +%{smart_count} files',
},
upload: 'Upload',
retryUpload: 'Retry upload',
xMoreFilesAdded: {
0: '%{smart_count} more file added',
1: '%{smart_count} more files added',
},
showErrorDetails: 'Show error details',
},
};