Skip to content
Twentyfirst UIPro

File Drop

Forms · FileDrop

View as Markdown

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

  • onFiles(files) hands over the real File objects the person picked or dropped, after accept and multiple; upload them yourself. Dropped files that do not match accept go to onReject; say so with an inline Alert, not a toast.
  • Progress is yours to report: control files ({ id, name, size, progress, file }) and set progress from your upload. Below 100 a row shows a progress bar and a cancel button, at 100 it reads "uploaded". With onFiles and no files, rows show only the size. onRemove tells you a file was removed or its upload cancelled.
  • Without onFiles the list animates made-up progress, as a demo of the look (simulateProgress turns that on or off).
  • The zone turns mint while a file is held over it, so people know the drop will land.
  • Say what is accepted in the hint (types, size).
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[]The listed files (controlled); set `progress` per file to show real upload progress.
onChange?(f: UploadFile[]) => voidThe list changed: files added (with their `file`) or removed.
onFiles?(files: File[]) => void | boolean | File[]The person picked or dropped files: the real `File` objects, after `accept` and `multiple`. Upload them yourself. To show progress, control `files` and set each `progress`; an uncontrolled list shows them with their size only. Return `false` to list none of them, or the files to list (for example after checking their size).
onReject?(files: File[]) => voidDropped files that do not match `accept` (show an inline Alert).
onRemove?(f: UploadFile) => voidA listed file was removed or its upload cancelled.
simulateProgress?booleanAnimate made-up progress for added files, as a demo of the look. Default: on without `onFiles` (as before), off with it.
title?string
hint?string
accept?stringAccepted types, as for `<input type="file">` ("image/*,.pdf"); also checked on drop.
multiple?boolean
disabled?booleanNo picking or dropping; the list stays visible.
name?stringTakes part in a surrounding form under this name: the listed files are submitted with it.
className?stringExtra class on the root element.
style?CSSPropertiesInline style on the root element.