Uppy Dashboard with Restrictions and Results

ProNew

The Uppy engine with a rules summary (types, sizes, count), a result list of uploaded files with their URLs and a Copy link button for each, and restriction errors shown as readable sentences. Use this when you want Uppy's file handling in your own design system.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

You like Uppy's restriction and retry model and want results (URLs) back in your own UI.

Do not use it when: If you need Uppy's remote sources (Google Drive, Instagram, webcam plugins), use the official Dashboard.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Description
`upload`	`(file, { onProgress, signal }) => Promise<{ url? } \| void>`	Send one file; return its URL.
`onDone`	`(files: { name, url }[]) => void`	Called after each batch with the successful uploads.

Accessibility

The rules are visible text under the drop area, not hidden in an error. A restriction failure is an alert that names the file.
Results are a labelled region and list; every Copy link button names the file, and its label changes to say it worked.
Everything else (file list, retry, progress, keyboard) is the Uppy Uploader component's behaviour.

Testing

The pattern ships with a Testing Library test (uppy-dashboard-restrictions.test.tsx) that covers: its main behaviour, the keyboard path and the error or empty states.