File Upload

A drag-and-drop dropzone with a file list that tracks upload progress, shows completion, and handles errors. Fully controlled — wire up your own upload logic via onFilesAdded.

Default

Dropzone with drag-and-drop support and a file list below showing upload progress, completion, and error states.

or drag and drop

SVG, PNG, JPG or GIF (max. 800×400px)

Example dashboard screenshot.jpg
720 KB
Uploading…
50%
Tech design requirements_2.pdf
720 KB
Complete
100%
Tech design requirements.pdf
1 MB
Failed

Compact

Use variant="compact" for a denser layout where the card background itself fills as progress — no separate progress bar is shown.

or drag and drop

SVG, PNG, JPG or GIF (max. 800×400px)

Example dashboard screenshot.jpg
720 KB
50%
Tech design requirements_2.pdf
720 KB
Complete
Tech design requirements.pdf
1 MB
Failed

Disabled

Pass isDisabled to prevent interaction with the dropzone.

or drag and drop

SVG, PNG, JPG or GIF (max. 800×400px)

Restrict file types

Use the accept prop to restrict the native file picker to specific types. The hint prop conveys constraints to the user.

or drag and drop

Please upload PNG or JPEG images only.