Pesto UI

File Upload

A dashed dropzone that takes clicks, keyboard and dragged files, plus a row component for each uploaded file. Its accept and size limits are a convenience for the person choosing files, not a security check: a server that receives them must check each file's real type from its content and its size, and store it outside the web root.

tsx
import { FileUpload, FileUploadItem } from "@pestoui/core"

Dropzone

The zone is the button, so click, Enter and Space all open the picker. Passing accept and maxSize writes the hint line for you, and dragged files are re-checked against both.

Sizes & disabled

Uploaded files

One FileUploadItem per file inside a <ul>. Status drives everything: uploading shows the progress bar and percentage, error tints the row and prints the message. Remove a row to see it go.

  • brand-guidelines.pdf2.3 MB · 64%
  • team-photo.png820 KB
  • quarterly-report.csv18 MB
    quarterly-report.csv is 18 MB — the limit is 10 MB.

Props

PropTypeDefaultDescription
size"sm" | "default" | "lg""default"Padding and tile size of the dropzone.
acceptstring—Native accept list — extensions, MIME types or type/* wildcards. Re-checked after a drop, since the browser only filters the picker.
multiplebooleanfalseAllow more than one file per selection.
maxSizenumber—Per-file byte limit. Oversized files are rejected with a message instead of being passed on.
onFilesChange(files: File[]) => void—Fires with the files that passed the accept and size checks.
hintReactNode—Overrides the hint line, which otherwise reads from accept and maxSize.
disabledbooleanfalseDims the zone and ignores clicks and drops.
FileUploadItem.namestring—File name. Its extension fills the tile, falling back to a file icon.
FileUploadItem.sizenumber—File size in bytes, printed as a rounded human label.
FileUploadItem.progressnumber—Upload percentage, 0–100. Clamped, and shown beside the size while uploading.
FileUploadItem.status"uploading" | "complete" | "error"—Row state. Inferred from progress and error when omitted.
FileUploadItem.errorstring—Failure message shown under the file name.
FileUploadItem.onRemove() => void—Adds the trailing remove button. Omit it and no button renders.
PreviousFieldNext Filter

Pesto UI · 117 documented components