Skip to content
Twentyfirst UIHalo

File Drop

Forms · FileDrop

Dashed drop zone plus an upload list with progress. Click, Enter or drop to add files.

Props: files/onChange (controlled list of {id, name, size, progress}), title, hint, accept, multiple (default true).

  • The zone turns mint while a file is held over it, so people know the drop will land.
  • Each row shows percent while uploading and size when done; the trailing button cancels, then removes.
  • Say what is accepted in the hint (types, size). Reject the rest with an inline Alert, not a toast.
Drop files here or browsePDF, PNG or JPG up to 10 MB · drag several at once
Receipt-April-Hetzner.pdf180 KB · uploaded
Team-offsite-photos.zip46% · 23 MB

Props

FileDrop

PropTypeNotes
files?UploadFile[]
onChange?(f: UploadFile[]) => void
title?string
hint?string
accept?string
multiple?boolean
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.