File upload

@summonware/ui · file-upload · P2 · Forms

Usage

A drag-and-drop dropzone over the native File API — the reference used FilePond, but the real work here (accept filtering, drag state, a progress list) is small enough to own outright and stay entirely on brand tokens, rather than restyling a plugin's own CSS.
import { FileUpload } from '@summonware/ui';

Best practices

DoState the accepted types and size limit in `hint` — a dropzone with no stated constraint just produces a rejected upload and a confused user.
Don'tSilently drop a file that fails validation. Show it in the list with an error state instead of making it disappear.

Examples

Common configurations, variations and states.

Attachments dropzone

Drag files here, or

  • contract.pdf

  • photo.jpg

PDF, PNG or JPG up to 10MB

One file mid-upload, one complete — the two real states a progress list needs to show.

Reference variants

2 of 4 labels from the reference are demonstrated above.

Where it appears

Used on 7 catalogued screens, including admins-course-course-add, admins-course-site, admins-course-student-add, admins-course-teacher-add, admins-helpdesk-create-ticket, application-ec-add-product and 1 more.