/// Inputs
FileUpload
A keyboard-operable dashed dropzone plus a removable selected-file list — selection only; the consumer handles the upload.
import { FileUpload } from "@protocore/pds";Basics
Click or drop onto the zone to pick a single file. onFilesChange reports the current File[]; the component only manages selection — you run the actual upload. accept filters the native picker.
Multiple with a size cap
Set multiple to accumulate files and maxSize (bytes) to reject oversized ones — rejections are announced. Each selected file lists as a row with a mono name, a formatted size, and an × remove.
When to use it
Use FileUpload anywhere a user attaches local files — evidence, logs, images, documents. It is deliberately network-free: it captures the selection and hands you File objects, leaving progress, retries, and transport to your own uploader. For a single value that's part of a larger form, wrap it in a Field for the label and hint.
Usage
Do
- Describe accepted formats and limits in `hint` — it's wired as the zone's `aria-describedby`.
- Set `accept` and `maxSize` so bad files are filtered before they reach your uploader.
- Use `multiple` only when several files are genuinely expected.
- Drive your upload from `onFilesChange`, keeping progress state in your own layer.
Don't
- Don't expect the component to upload — it never touches the network.
- Don't rely on `accept` alone for validation; re-check size and type server-side.
- Don't hide the file list — users need to confirm and remove what they picked.
- Don't omit an `aria-label`; the zone is a button and needs an accessible name.
Accessibility
| Keys | Action |
|---|---|
| Tab | Focus the drop zone (a `role="button"`). |
| Enter / Space | Open the native file picker. |
| Tab (in list) | Reach each file's × remove button. |
- The zone is a labelled `role="button"` described by its `hint`; the real file input is kept out of the button and off the tab order to avoid nested interactives.
- Drag-over switches the border to the accent color via `data-dragover`; selection and rejection are announced through a polite live region.
- Each selected file exposes a `Remove <name>` button.