Extractable status bar - host upload progress anywhere on the page

MultipleUpload.createStatusBar(target, { uploader }) mounts a self-contained progress chrome inside any DOM element. Overall %, smoothed speed, ETA, success / failure counts, plus pause / resume / cancel-all buttons - all wired into the uploader's event stream. Drop it in your app header, a sidebar, a sticky footer, or a modal. This is the composability story Uppy ships as its StatusBar plugin; we ship it as a one-line factory.

Mounted in an arbitrary host element (not the uploader chrome):

Try it: queue a few files, click upload. The status bar in the header element updates live with overall %, speed, ETA, and counts. Hit in the status bar - every queued file pauses. Hit to resume.

API

const bar = MultipleUpload.createStatusBar(target, {
 uploader: myUploader, // or an array of uploaders for aggregate view
 showSpeed: true, // default true
 showEta: true, // default true
 showCounts: true, // default true (uploading / complete / failed)
 showControls: true // default true (pause / resume / cancel-all)
});

// Returns:
// { target, uploaders, refresh(), destroy() }
//
// .refresh() -> force a re-render (rarely needed; events auto-refresh)
// .destroy() -> unsubscribe from events + clear the host element

Aggregate view across multiple uploaders

Pass an array. Counts sum across uploaders; speed reports the fastest active task; ETA reports the longest remaining.

const profilePics = new MultipleUpload('#profile-pics', { uploadUrl: '/api/profile' });
const attachments = new MultipleUpload('#attachments', { uploadUrl: '/api/attach' });

MultipleUpload.createStatusBar('#global-status', {
 uploader: [profilePics, attachments]
});

Composes with your design system

The widget ships with light CSS (just colors via CSS variables + brand color tokens). Override `--mu-primary` + `--mu-primary-deep` on the host to match your theme:

<style>
 #global-status {
 --mu-primary: #7c3aed; /* violet */
 --mu-primary-deep: #5b21b6;
 }
</style>

Lifecycle

Subscribed events: taskProgress, taskComplete, taskError, taskAdded, taskRemoved, taskCancelled, taskPaused, taskResumed, progress.
Auto-refresh: on every relevant event - no polling.
Pause/resume button toggling: tracks whether any task is paused; shows instead of accordingly.
Destroy: removes all event subscriptions + clears the host element. Safe to call multiple times.

Composability win: most teams want progress visible in their app's chrome, not inside the uploader card. This was the most-asked-for missing feature from the previous push.