Status Bar Example

The StatusBar plugin shows detailed upload/processing progress with pause/resume/cancel buttons.

Console output (latest logs are at the top):

On this page we're using the following HTML snippet:

<!-- Basic Uppy styles -->
<link rel="stylesheet" href="/uppy/uppy.min.css">
<div class="grid">
  <div class="column-full">
    <div class="UppyInput"></div>
    <div class="UppyInput-Progress"></div>
  </div>
</div>

Along with this JavaScript:

app.es6view raw

const Uppy = require('uppy/lib/core/Core')
const FileInput = require('uppy/lib/plugins/FileInput')
const StatusBar = require('uppy/lib/plugins/StatusBar')
const Tus10 = require('uppy/lib/plugins/Tus10')
const uppyOne = new Uppy({debug: true})
uppyOne
  .use(FileInput, {target: '.UppyInput'})
  .use(Tus10, {endpoint: '//master.tus.io/files/'})
  .use(StatusBar, {target: '.UppyInput-Progress'})
  .run()

And the following CSS:

Please see documentation for details.

Hey there stranger! Uppy is in the early stages of development and the example section is our playground. Things might not yet work, but we're working hard to improve this.

We're on a monthly release cycle and our latest version is v0.19.0, but the example pages reflect the latest work in our master branch. Here's what changed in master since v0.19.0 in terms of commits, while the CHANGELOG provides a higher level view of this things planned for our next release.

Files from the examples are uploaded to our test servers and deleted daily.

Examples

Status Bar Example