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
Progress Bar
@uppy/progress-bar
is a minimalist plugin that shows the current upload progress in a thin bar element, like the ones used by YouTube and GitHub when navigating between pages.
import ProgressBar from '@uppy/progress-bar' uppy.use(ProgressBar, { // Options }) |
The @uppy/drag-drop
example uses a Progress Bar to show progress.
Installation
This plugin is published as the @uppy/progress-bar
package.
Install from NPM:
npm install @uppy/progress-bar |
In the CDN package, the plugin class is available on the Uppy
global object:
const { ProgressBar } = Uppy |
CSS
The @uppy/progress-bar
plugin requires the following CSS for styling:
import '@uppy/core/dist/style.css' import '@uppy/progress-bar/dist/style.css' |
Import general Core styles from @uppy/core/dist/style.css
first, then add the Progress Bar styles from @uppy/progress-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/progress-bar
plugin has the following configurable options:
uppy.use(ProgressBar, { target: '.UploadForm', fixed: false, hideAfterFinish: true, }) |
id: 'ProgressBar'
A unique identifier for this Progress Bar. It defaults to 'ProgressBar'
. Use this if you need to add many ProgressBar
instances.
target: null
DOM element, CSS selector, or plugin to mount the progress bar into.
fixed: false
When set to true, show the progress bar at the top of the page with position: fixed
. When set to false, show the progress bar inline wherever it’s mounted.
uppy.use(ProgressBar, { target: 'body', fixed: true, }) |
hideAfterFinish: true
When set to true, hides the progress bar after the upload has finished. If set to false, it remains visible.