FileUpload

Drag-and-drop zone with an always-present "browse" button, so drag-and-drop is never the only way to select a file. Fully controlled: the component reports changes via onFilesChange rather than owning selection state itself.

function Demo() {
const [files, setFiles] = useState([]);
return (
  <FileUpload
    label="Attachments"
    files={files}
    onFilesChange={setFiles}
    multiple
    maxSizeBytes={5 * 1024 * 1024}
  />
);
}
render(<Demo />);

Editable — change the code above and the preview updates live.

Installation

import { FileUpload } from "@labanaat/ui/file-upload";

Props

Prop	Type	Default	Description
files	File[]	—	Controlled list of selected files
onFilesChange	(files: File[]) => void	—	Called whenever the selection changes
label	string	—	Field label
accept	string	—	Native file-input accept filter
multiple	boolean	false	Allow selecting more than one file
maxSizeBytes	number	—	Files over this size are silently rejected
disabled	boolean	false	Disables interaction