Docs
- Getting Started
- Uppy
- Companion
- List of Plugins
- Common Plugin Options
- Custom Stores
- Community Projects
- Locale Packs
- Migration guides
UI Elements
Sources
- Drag & Drop
- Drop Target
- File Input
- Audio
- Webcam
- Screen capture
- Provider Plugins
- ⓒ Box
- ⓒ Dropbox
- ⓒ Google Drive
- ⓒ OneDrive
- ⓒ Zoom
- ⓒ Unsplash
- ⓒ Import From URL
Destinations
Miscellaneous
React
- Introduction
- <StatusBar />
- <DragDrop />
- <FileInput />
- <ProgressBar />
- <Dashboard />
- <DashboardModal />
- React Native
Other Integrations
Contributing
Status Bar
The @uppy/status-bar
plugin shows upload progress and speed, ETAs, pre- and post-processing information, and allows users to control (pause/resume/cancel) the upload.
This plugin is best used in combination with a basic file source plugin, such as @uppy/file-input
or @uppy/drag-drop
, or a custom implementation.
import StatusBar from '@uppy/status-bar' uppy.use(StatusBar, { // Options }) |
The StatusBar plugin is included in the Dashboard by default.
Installation
This plugin is published as the @uppy/status-bar
package.
Install from NPM:
npm install @uppy/status-bar |
In the CDN package, the plugin class is available on the Uppy
global object:
const { StatusBar } = Uppy |
CSS
The @uppy/status-bar
plugin requires the following CSS for styling:
import '@uppy/core/dist/style.css' import '@uppy/status-bar/dist/style.css' |
Import general Core styles from @uppy/core/dist/style.css
first, then add the Status Bar styles from @uppy/status-bar/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/status-bar
plugin has the following configurable options:
uppy.use(StatusBar, { id: 'StatusBar', target: 'body', hideAfterFinish: true, showProgressDetails: false, hideUploadButton: false, hideRetryButton: false, hidePauseResumeButton: false, hideCancelButton: false, doneButtonHandler: null, locale: {}, }) |
id: 'StatusBar'
A unique identifier for this Status Bar. It defaults to 'StatusBar'
. Use this if you need to add several StatusBar instances.
target: body
DOM element, CSS selector, or plugin to mount the Status Bar into.
hideAfterFinish: true
Hide the Status Bar after the upload is complete.
showProgressDetails: false
By default, progress in the Status Bar is shown as percentage only. If you would like to also display remaining upload size and time, set this to true
.
showProgressDetails: false
: Uploading: 45%showProgressDetails: true
: Uploading: 45%・43 MB of 101 MB・8s left
hideUploadButton: false
Hide the upload button. Use this if you are providing a custom upload button somewhere, and using the uppy.upload()
API.
hideRetryButton: false
Hide the retry button. Use this if you are providing a custom retry button somewhere, and using the uppy.retryAll()
or uppy.retryUpload(fileID)
API.
hidePauseResumeButton: false
Hide pause/resume buttons (for resumable uploads, via tus, for example). 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: false
Hide the cancel button. Use this if you are providing a custom retry button somewhere, and using the uppy.cancelAll()
API.
doneButtonHandler
If passed a function, Status Bar will render a “Done” button in place of pause/resume/cancel buttons, once the upload/encoding is done. 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.cancelAll() 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', }, } |