File upload
A drop area with a real file input behind a button, plus a list that shows each file's progress, result or error. It reports files; sending them is up to your app.
Drag files here or browse your computer
PDF, PNG or JPG up to 10 MB
Installation
Set up Camaleo once (Installation), then import the zone and the list.
import { Dropzone, FileList, FileItem } from "@camaleo/react";Anatomy
The Dropzone is a labelled group with a button that opens the file picker. Each FileItem in a FileList has an icon, the name, a progress bar or meta line, and your actions.
Examples
Every example is a real file you can copy. They all wear the skin, mode and brand from the bar above. Nothing leaves your browser: uploads are simulated with timers.
Drag files here or browse your computer
PDF, PNG or JPG up to 10 MB
Add product photos
PNG or JPG up to 2 MB each
Types and size limit
Drop a PDF or a large photo. accept and maxSize sort the files, onFilesRejected says why for each one, and a status line announces the result.
Drag files here or browse your computer
PDF, PNG or JPG up to 10 MB
- cover.pngUploaded · 1.2 MB
Progress, cancel and remove
Add a file. Keep the upload state yourself and map it to status, progress and meta; the bar takes its name from the file.
- board-minutes.docxReady to send · 0.8 MB
- q3-report.pdf64% · 2.4 of 3.8 MB
- cover.pngUploaded · 1.2 MB
- site-tour.mov
Larger than 10 MB. Trim the video or share a link to it.
Every status
status drives the row: idle before sending, uploading with a bar, done with a check, error with the message.
- bank-statement-september.pdf
Connection lost at 48%. Your file is still here.
Retry after an error
Click retry. A failed row keeps the file and offers the next step, so people never pick it again from the folder.
Upload your logo
SVG, PNG or JPG up to 5 MB
One image
With multiple={false} only the first file is reported, and choosing again replaces it; the row shows its name, type and size.
- lease-agreement-signed.pdfScanning for viruses…
Unknown progress
When the server can't measure it (a virus scan, a conversion), pass progress={null} and say in meta what is happening.
Drag files here or browse your computer
Storage full: 15 GB of 15 GB used. Delete old files or upgrade your plan.
Disabled, with a reason
disabled ignores drops and disables the button. Use the description to say why and what to do instead.
In context
Uploads are part of a task. These are whole pieces of UI you can copy, in the skin you picked.
Profile photo
Shown next to your comments and in the team directory.
Drop a photo or browse
Square PNG or JPG up to 2 MB
Import contacts
Upload a CSV exported from your CRM. Columns: name, email, company.
Drop your CSV file
CSV up to 20 MB, one contact per row
Guidelines
Drag files here or browse
PDF, PNG or JPG up to 10 MB
People check before they drag, and no file is refused by surprise.
Drop files here
The rules exist anyway; people only learn them when a file fails.
- site-tour.mov
Larger than 10 MB. Trim the video or share a link to it.
The error names the limit and the way out, right on the file.
- site-tour.mov
Upload failed.
"Upload failed." leaves people retrying the same file.
Props
<input accept>: extensions, MIME types, image/*.accept and maxSize.reason: "type" | "size".These are the props of Dropzone; children render between the description and the button. A rejection is { file, reason: "type" | "size" }. FileList takes the attributes of <ul>; give it an aria-label.
FileItem shows one file:
error.null is indeterminate.status="error".Other <li> attributes pass through.
Styling hooks
Restyle it without forking: target the attributes, or set the tokens on a parent, a skin or the zone itself.
Attributes
Tokens it reads
Color
Shape & size
Type & motion
This component only
Accessibility
- Dragging is a shortcut, not the only way: the zone always has a real button and a native <input type="file">.
- The zone is a group named by its title and described by its description, so the accepted types are read with it.
- Each progress bar is named by its file. Name action buttons with the file too: "Remove cover.png", not "Remove".
- Errors are text under the file, not only a red border; announce what was added or refused with a role="status" line.