Forms

File Dropzone

Drag-and-drop file upload area.

Import

tsx

import { FileDropzone } from "@cronus-ui/ui";

bash

npx cronus-ui add file-dropzone

Examples

Upload

Drag-and-drop or click-to-browse uploads with selected-file feedback.

Drag & drop or browse

No files selected yet.

tsx

function FileDropzoneDemo() {
  const [files, setFiles] = useState<string[]>([]);

  return (
    <div className="flex flex-col gap-4">
      <FileDropzone
        multiple
        aria-label="Upload attachments"
        onFiles={(picked) => setFiles(picked.map((file) => file.name))}
      />
      {files.length > 0 ? (
        <ul className="flex flex-col gap-2">
          {files.map((name) => (
            <li
              key={name}
              className="flex items-center gap-2 rounded-lg border border-border-soft bg-surface-inset px-3 py-2 text-sm text-fg-secondary"
            >
              <FileText className="size-4 text-fg-tertiary" aria-hidden="true" />
              {name}
            </li>
          ))}
        </ul>
      ) : (
        <p className="text-xs text-fg-tertiary">No files selected yet.</p>
      )}
    </div>
  );
}

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component FileDropzoneDefault layout:inline style:file-dropzone {
  aria-label:"Upload files"
  label "Upload files"
}

page "/audit/file-dropzone/default" type:custom {
  use FileDropzoneDefault
}

API Reference

Generated from the component's exported types.

FileDropzoneLabels

Prop	Type	Default	Description
`upload`*	`string`	—	—
`drop`*	`string`	—	—
`browse`*	`string`	—	—

FileDropzoneProps

Prop	Type	Default	Description
`onFiles`*	`(files: File[]) => void`	—	—
`accept`	`string`	—	—
`multiple`	`boolean`	`false`	—
`disabled`	`boolean`	`false`	Disables pointer and keyboard interaction.
`className`	`string`	—	Additional class names merged onto the root.
`children`	`ReactNode`	—	Contents of the component.
`aria-label`	`string`	—	Accessible name for the file input. Defaults to `"Upload files"` so the control is never nameless.
`aria-describedby`	`string`	—	IDs of element(s) that describe the dropzone (e.g. accepted types).
`labels`	`Partial<FileDropzoneLabels>`	—	Override the default English strings.