Status Bar Example
The StatusBar plugin shows detailed upload/processing progress with pause/resume/cancel buttons.
Console output:
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:
require('es6-promise/auto') require('whatwg-fetch') const Uppy = require('@uppy/core') const FileInput = require('@uppy/file-input') const StatusBar = require('@uppy/status-bar') const Tus = require('@uppy/tus') const uppyOne = new Uppy({debug: true, autoProceed: true}) uppyOne .use(FileInput, { target: '.UppyInput', pretty: false }) .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' }) .use(StatusBar, { target: '.UppyInput-Progress', hideUploadButton: true, hideAfterFinish: false }) |
Please see documentation for details.
Hey there stranger! Uppy
is actively developed and the example section
is our playground. Things might not work, but we're working hard to improve.
We're on a monthly release cycle and our latest version is v1.26.0, but the example pages reflect the latest work in our master branch. Here's what changed in master since v1.26.0 in terms of commits, while the CHANGELOG provides a higher level view of the things planned for our next release.
Files from the examples are uploaded to our test servers and deleted every 24-72 hours.
Caught a mistake or want to contribute to the documentation?
Edit/fork this page directly on Github!