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
})

Try it live

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.

Docs

UI Elements

Sources

Destinations

File Processing

Miscellaneous

React

Other Integrations

Contributing