BLD8 / ui
Forms

File upload.

Browse or drop files, validate them and connect your own transport.

LIVE PREVIEWTry it. It works.
Upload example
Drop files here

.txt,.pdf,.png,.jpg · Up to 3 files · 1.0 MB each

.txt,.pdf,.png,.jpg. Maximum 3 files, 1.0 MB per file. Drag and drop or browse.

Files stay in this page. No upload service is connected. File checks must also run on your server.

Install the source

Terminal
npx shadcn@latest add https://ui.bld8.dev/r/file-upload.json

Registry setup · Open the playground

Usage

React / TypeScript
<FileUpload label="Attachments" accept=".pdf,.png" maxFiles={3}
  maxSize={5 * 1024 * 1024} value={files} onValueChange={setFiles}
  onUpload={(files,{signal,onProgress}) => uploadFiles(files,{signal,onProgress})} />

In the workspace or ZIP starter, import components from @bld8/ui and include @bld8/ui/styles.css once. Registry installations use your local bld8/ source path. Wrap overlays in UIProvider.

API & behaviour

Native browsing, drag/drop, duplicate detection, type/size/count checks and removal. Files remain local unless onUpload is supplied. That async callback receives an AbortSignal and per-file onProgress(file,percent). Failure allows retry, cancellation aborts and stale completions are ignored. Frontend checks are convenience only; validate content, size and access on the server. The showcase callback mode is explicitly a simulation.

Notes to self

Test this component with real content, keyboard input and both themes. The example is a starting point; labels, error handling and behaviour still need to fit the application.