FileUpload

import { FileUpload } from "@rebasepro/ui";

Props

Prop	Type	Required	Description
accept	Record<string, string[]>	—
onFilesAdded	OnFilesUploadAdded	yes
onFilesRejected	OnFileUploadRejected	—
maxSize	number	—
disabled	boolean	—
maxFiles	number	—
title	React.ReactNode	—
uploadDescription	React.ReactNode	—
preventDropOnDocument	boolean	—
size	"small" | "medium" | "large"	—

Example

This is the example the design-system sync renders and verifies for this component.

import { FileUpload, UploadCloudIcon } from "@rebasepro/ui";

// FileUpload's .d.ts has no `children` prop (the source's PropsWithChildren
// wrapper didn't survive extraction) — stick to `title`/`uploadDescription`,
// the documented content slots, rather than porting a `children` usage.
// It previously rendered blank on the floor card; the fix is giving it
// real `uploadDescription`/`title` content and a non-zero footprint.

export const Idle = () => (
    <div className="p-4 w-full max-w-md">
        <FileUpload
            size="large"
            accept={{ "text/csv": [".csv"], "application/json": [".json"] }}
            maxFiles={1}
            title="Import data"
            uploadDescription={<><UploadCloudIcon size={18}/> Drag and drop a CSV or JSON file, or click to browse</>}
            onFilesAdded={() => {}}
        />
    </div>
);