Forms

File Dropzone

Drag-and-drop file upload area.

Import

tsx

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

bash

npx cooud-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>
  );
}

API Reference

Generated from the component's exported types.

FileDropzoneProps

Prop	Type	Default	Description
`onFiles`*	`(files: File[]) => void`	—	—
`accept`	`string`	—	—
`multiple`	`boolean`	`false`	—
`disabled`	`boolean`	`false`	—
`className`	`string`	—	—
`children`	`ReactNode`	—	—
`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).