Uppy is an open source project by Transloadit
Transloadit Community Plan: free hosted Companion & tusd, unlimited uploading, and 5GB/mo encoding traffic!

<ProgressBar />

The <ProgressBar /> component wraps the @uppy/progress-bar plugin.


Install from NPM:

npm install @uppy/react
import { ProgressBar } from '@uppy/react'

// Alternatively, you can also use a default import:
// import ProgressBar from '@uppy/react/lib/ProgressBar'


The ProgressBar 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.


The <ProgressBar /> component supports all @uppy/progress-bar options as props. Additionally, an Uppy instance must be provided in the uppy={} prop: see Initializing Uppy for details.

import React from 'react'
import { ProgressBar } from '@uppy/react'