A form-associated upload control. The dashed dropzone wraps a real
<input type="file">, so the keyboard
“Browse” button opens the native picker; drag-and-drop is a progressive
enhancement on top.
The default vertical layout is a centred dropzone
with a large icon. Try dropping or browsing a file to see the
sc-file-upload-item rows appear.
layout="horizontal" packs the icon and browse line
into a single row for tighter spaces.
multiple keeps every selected file;
accept mirrors the native filter; and
secondary-text sets the helper line.
max-size (bytes) flags files that are too large as
a negative row instead of accepting them.
sc-file-upload-item)The component renders these rows for you, but you can use them standalone when wiring a
real upload. state drives the visual, and
value is the upload percentage.
document and image uploads in forms. Selected files
render as sc-file-upload-item rows that show
progress and flag over-size files.
secondary-text up front.accept and max-size so invalid files are caught early.multiple only when several files are genuinely expected.accept rather than rejecting after upload.<button> that opens the native file picker; the underlying <input type="file"> is hidden from the tab order.role="status" live region.required sets valueMissing validity, and files post under name.uploading / positive / negative state with text, not colour alone.