UploadDropzone

Where files are added: a picker button, a drop area and the list of running uploads with progress and status. Use it on library pages; FileInput in forms keeps files with the form instead.

UploadDropzone

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, UploadDropzone

Upload files

or drop files here

JPEG, PNG, WebP, SVG or PDF, up to 20 MB each. Images become WebP with smaller copies.

Dark theme, UploadDropzone

Upload files

or drop files here

JPEG, PNG, WebP, SVG or PDF, up to 20 MB each. Images become WebP with smaller copies.

High contrast theme, UploadDropzone

Upload files

or drop files here

JPEG, PNG, WebP, SVG or PDF, up to 20 MB each. Images become WebP with smaller copies.

UsageLink to the section Usage

tsx

import { UploadDropzone } from '@skribly/ui/media'

tsx

<UploadDropzone title="Upload files" buttonLabel="Choose files" dropLabel="or drop files here"
  description="JPEG, PNG or PDF, up to 20 MB each" acceptedFileTypes={['image/*', '.pdf']}
  maxFileSize={20_000_000} rejectedMessage={(files) => `Left out: ${names(files)}`}
  onFiles={upload} uploads={uploads} statusLabels={statusLabels}
  onRetry={retry} retryLabel={(item) => `Retry ${item.name}`} />

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

The drop area is a React Aria drop zone: keyboard and screen reader users can drop into it and paste a copied file while it has focus.
The picker button is described by the accepted types.
Each upload is a named progress bar with its status in words and a glyph.
A finished upload is announced politely and a failed one at once, with its reason; progress itself is not announced, so it never talks over the page.
Rejected files are listed in a warning that stays, and nothing leaves the list on its own.

This demo runs through axe in all three themes on every test run. See what the tests check.