Files & uploads

Choose, drop, upload and show files.

File inputs #

Choose or drop files.

FileInput #

Native file input.

<FileInput aria-label="Attachment" />

Prop	Type	Description
`accept`	`string`	Allowed file types, e.g. `image/*,.pdf`.
`disabled`	`boolean`	Disables the field.
`invalid`	`boolean`	Marks the value invalid (`aria-invalid` and error styling).
`multiple`	`boolean`	Allow choosing several files.
`name`	`string`	Field name submitted with the form.
`onChange`	`(e: Event) => void`	Called when the selection changes; read `e.target.files`.
`required`	`boolean`	A file must be chosen before the form submits.

FileButton #

Hidden file input triggered by a button (Mantine FileButton).

Upload avatar

No file chosen

function Example() {
    const file = signal("");
    return (
        <Group gap="0.75rem">
            <FileButton accept="image/*" onChange={(files) => file.set(files[0]?.name ?? "")}>
                Upload avatar
            </FileButton>
            <Text muted>{file() || "No file chosen"}</Text>
        </Group>
    );
}

Slots: root input label

Prop	Type	Required	Default	Description
`onChange`	`(files: File[]) => void`	yes		Called with the chosen files.
`accept`	`string`			Allowed file types, e.g. `image/*,.pdf`.
`children`	`content`		`"Choose file"`	Button label.
`disabled`	`boolean`			Disables the button.
`multiple`	`boolean`			Allow choosing several files.

Dropzone #

Drag-and-drop file target (also a click-to-browse file input).

Drop CSV files here, or click to browse

No files yet

function Example() {
    const files = signal<string[]>([]);
    return (
        <Stack gap="0.5rem">
            <Dropzone
                multiple
                accept=".csv"
                onDrop={(dropped) => files.set(dropped.map((f) => f.name))}
            >
                Drop CSV files here, or click to browse
            </Dropzone>
            <Text muted>{files().length ? files().join(", ") : "No files yet"}</Text>
        </Stack>
    );
}

Slots: root input label

Prop	Type	Required	Description
`onDrop`	`(files: File[]) => void`	yes	Called with the dropped or chosen files.
`accept`	`string`		Allowed file types, e.g. `image/*,.pdf`; other files are ignored.
`children`	`content`		Instructions shown in the drop area.
`disabled`	`boolean`		Ignore drops and clicks.
`multiple`	`boolean`		Accept several files at once.

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.

File items #

Uploads in progress and attached files.

UploadItem #

File upload row with progress.

[email protected]12%

function Example() {
    const progress = signal(12);
    const cancelled = signal(false);
    // Simulated upload; effects run only in the browser.
    effect(() => {
        const timer = setInterval(() => {
            if (!cancelled() && progress() < 100) progress.set(Math.min(100, progress() + 8));
        }, 400);
        return () => clearInterval(timer);
    });
    return (
        <Show
            when={!cancelled()}
            fallback={
                <Button
                    size="sm"
                    variant="outline"
                    onClick={() => {
                        progress.set(0);
                        cancelled.set(false);
                    }}
                >
                    Upload again
                </Button>
            }
        >
            <UploadItem
                name="[email protected]"
                progress={progress()}
                onCancel={() => cancelled.set(true)}
            />
        </Show>
    );
}

Slots: root bar cancel name row status track

Prop	Type	Required	Description
`name`	`string`	yes	File name.
`progress`	`number`	yes	Upload progress in percent (0–100).
`error`	`string`		Error message; shows the failed state.
`onCancel`	`() => void`		Shows a cancel button; called when it is pressed.

FileCard #

Attached file with icon, name, metadata and remove action.

Q3-report.pdf2.4 MB · PDF

function Example() {
    const attached = signal(true);
    return (
        <Show
            when={attached()}
            fallback={
                <Button size="sm" variant="outline" onClick={() => attached.set(true)}>
                    Attach Q3-report.pdf
                </Button>
            }
        >
            <FileCard
                name="Q3-report.pdf"
                meta="2.4 MB · PDF"
                onRemove={() => attached.set(false)}
            />
        </Show>
    );
}

Slots: root icon meta name remove text

Prop	Type	Required	Default	Description
`name`	`string`	yes		File name.
`icon`	`IconName`		`"file"`	File icon.
`meta`	`string`			Small line, e.g. size and type.
`onRemove`	`() => void`			Shows a remove button; called when it is pressed.

IconName — Material Design Icons path names used by <Icon />.

type IconName = | "check" | "x" | "plus" | "minus" | "search" | "user" | "users" | "settings" | "menu" | "home" | "heart" | "star" | "bell" | "mail" | "calendar" | "clock" | "edit" | "trash" | "copy" | "download" | "upload" | "link" | "external" | "info" | "warning" | "error" | "success" | "chevron-down" | "chevron-up" | "chevron-left" | "chevron-right" | "arrow-left" | "arrow-right" | "eye" | "eye-off" | "eye-outline" | "lock" | "unlock" | "filter" | "more" | "close" | "spinner" | "sun" | "moon" | "play" | "pause" | "refresh" | "share" | "image" | "file" | "folder" | "zap" | "phone" | "git" | "code";

Also accepts the shared props: pass-through attributes, class, style, classes, styles, unstyled.