File Upload

Drop files, click, or use the keyboard. Type, size and count checks, image previews, per-file progress and removal.

import { FileUpload } from "pleate/file-upload";

Dropzone with progress, compact button

.pdf

Done, uploading and failed with Retry. Add files: every third one fails once.

value / defaultValue / onValueChange

Selected files.

File[]

accept / maxSize / maxFiles / multiple

Checks; rejections are listed and sent to onReject.

string / bytes / number / boolean

progress

Upload bars (simple form; see uploads).

Record<fileName, 0 to 100>

uploads

Per file state. Key entries with fileKey(file) (name-size-lastModified), or the file name when names are unique.

Record<fileKey(file) | fileName, { status: "uploading" | "done" | "error", progress?: 0 to 1, error? }>

onRetry / onRemove / retryLabel

Retry button on failed files; removal callback (e.g. cancel the upload).

(file) => void / (file) => void / stringdefault none / none / "Retry"

variant

Look.

"dropzone" | "button"default "dropzone"

name

Include the files in the form submission.

string