Client Side Media: Show upload progress (take 2)

[adamsilverstein]

What problem does this address?

When uploading an image or a group of images in the editor, there is currently no clear, centralized indication of overall upload progress. Users can see individual spinners on block placeholders, but there is no single place that summarizes how many uploads are in flight, how many have completed, or which file is currently being processed.

The Media Library already solves this nicely with a compact "Uploading" panel that shows a progress bar, a count (e.g. 6 / 10), and the name of the file currently being uploaded. We should bring a similar lightweight indicator into the editor's post panel area so users get feedback on client-side media uploads without leaving the editor.

Proposed solution

Add a small, unobtrusive upload progress indicator to the post (sidebar) panel that appears while one or more image uploads are in progress and disappears when the queue is empty.

The indicator should include:

• An UPLOADING label
• A single progress bar reflecting approximate overall progress across the current batch
• A count of completed vs. total uploads (e.g. 6 / 10)
• Optionally, the filename of the currently processing image

Keep it minimal — no per-file list, no detailed stages. Just enough information for the user to know that uploads are happening and roughly how far along they are.

Reference

The Media Library already displays this pattern in its sidebar while uploads are in progress:

• UPLOADING heading
• Progress bar
• 6 / 10 — IMG_0425.jpg

We should mirror that visual language in the post panel for consistency.

Post panel screenshot

Media Library screenshot

Acceptance Criteria

• A progress indicator appears in the post panel while media uploads are in progress (if the panel is open)
• The indicator shows a progress bar reflecting approximate overall progress
• The indicator shows a high level completed / total count (e.g. 6 / 10) when uploading a batch of images
• The indicator is hidden when no uploads are in progress
• The UI is accessible (appropriate ARIA roles/labels, and ideally an wp.a11y.speak announcement on start/completion)
• Works with both single and batch uploads
• Visual style is consistent with existing Gutenberg elements and the remainder of the post panel

Related

• Parent: Client Side Media iteration for WordPress 7.1 #76756
• Related: Images: Implement upload progress UI #74363 (broader upload progress UI exploration)
• Related: Track progress during media uploads #74362 (progress tracking in @wordpress/upload-media)

[Mamaduka]

It would be nice to get design feedback on this first. I'm 100% sure that the post panel is the right place for this data. There's an ongoing consolidation effect, which can have an effect on similar proposals - #76076

P.S. Have you seen GitHub progress snackbars? Maybe we could implement something like that.

cc @jasmussen, @jameskoster

[jameskoster]

I'm 100% sure that the post panel is the right place for this data.

The only issue here is that if the panel isn't open users would completely miss the feedback. Or is the suggestion to automatically open the panel during upload?

P.S. Have you seen GitHub progress snackbars?

I suppose if the primary feedback appears in the Inspector panel then a Snackbar might be a good supporting UX pattern to use as they are announced to users of assistive tech and visible regardless of whether the Inspector panel is open or not.

Maybe something like this would work:

[adamsilverstein]

The only issue here is that if the panel isn't open users would completely miss the feedback. Or is the suggestion to automatically open the panel during upload?

@jameskoster No - you are right, this is a shortcoming I noticed as well.

I'm trying the snackbar idea in #77249

I find this less obtrusive and immediately know this is a temporary notice triggered by my upload even without focusing on it.

[jameskoster]

I think the Snackbar can work as supporting feedback but probably isn't ideal for the primary UI. Mostly because Snackbars are intended for brief, non-critical feedback, and disappear after a certain time-frame. They also can't show rich progress (progress bar) very well. I'd probably reserve the snackbar for confirming when the upload is complete, to cover situations where the user selects a different block and the full upload progress UI is hidden.

[adamsilverstein]

They also can't show rich progress (progress bar) very well.

True, however part of the discussion on #75110 where I had implemented detailed progress updates in an overlay, was that all the granular detail was't actually useful for most users. Most users just want to know "how are my uploads going" (eg uploading 3 of 5 is the right level of detail). They probably don't care much about the byte upload progress of individual images (and those types of bars are notoriously inaccurate anyway) or client side action in progress.

I think the Snackbar can work as supporting feedback but probably isn't ideal for the primary UI.

I guess I'm questioning the value of such a UI beyond a minimal, transient "uploading x of 7" snackbar. How would this help users?

cc: @jasmussen for feedback when he is back

[jameskoster]

Doesn't that feedback bring this whole effort into question? Users can already see basic progress on the canvas via spinners and the opacity treatment. If no further detail is required then isn't what we already have adequate? 🤔