---
url: "https://vueda.dev/v3/reference/theming/keys/FileUpload.md"
title: "FileUpload"
---

# FileUpload

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in `dropzone` mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when `dragging`. The `disabled` state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root).

Vue component: [FileUpload](/v3/reference/api/vue/FileUpload.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/FileUpload.md#theme-key-FileUpload-root) | callback | The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in `dropzone` mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when `dragging`. The `disabled` state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root). |
| [trigger](/v3/reference/theming/keys/FileUpload.md#theme-key-FileUpload-trigger) | `h-vueda-control px-vueda-control-px has-[>svg]:px-vueda-control-px-sm` | The "choose file" affordance. Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) so the trigger reads as the same neutral chip as an outline-variant [Button.root](/v3/reference/theming/keys/Button.md#theme-key-Button-root), at the default control height with the icon-aware narrower padding kicking in when the trigger carries an icon. |
| [dropMessage](/v3/reference/theming/keys/FileUpload.md#theme-key-FileUpload-dropMessage) | `text-sm text-muted-foreground` | The "or drop here" helper line below the trigger. Muted secondary text at the sm tier so it sits as ancillary copy and never competes with the trigger label or a selected-file readout. |

<a id="theme-key-FileUpload-root"></a>

## root

> The outer container. In inline-trigger mode this is a tight flex column wrapping the picker button plus optional helper text; in `dropzone` mode it grows into a dashed-border target (2px input-coloured dashes, 6 spacing pad, large radius) that highlights with a primary-tinted fill when `dragging`. The `disabled` state dims the whole region and switches the cursor; the inner trigger still picks up its own disabled treatment from [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root).

Callback:

```javascript
({ dropzone, dragging, disabled }) => ({
            class: [
                // Base layout.
                "inline-flex flex-col items-center gap-1",

                // Dropzone and disabled states. The dragging branch swaps the border to
                // primary; gate the at-rest border on !dragging so only one border-color
                // is ever live (the two are mutually exclusive, not order-dependent).
                {
                    "rounded-lg border-2 border-dashed p-6 transition-colors": dropzone,
                    "border-input": dropzone && !dragging,
                    "border-primary bg-primary/5": dropzone && dragging,
                    "opacity-50 cursor-not-allowed": disabled,
                },
            ],
        })
```

Source: `client/lib/theme/vueda-tailwind/controls/FileUpload.theme.js:19`

<a id="theme-key-FileUpload-trigger"></a>

## trigger

> The "choose file" affordance. Composes [\_ButtonBase.root](/v3/reference/theming/keys/_ButtonBase.md#theme-key-_ButtonBase-root) plus [\_ButtonOutline.root](/v3/reference/theming/keys/_ButtonOutline.md#theme-key-_ButtonOutline-root) so the trigger reads as the same neutral chip as an outline-variant [Button.root](/v3/reference/theming/keys/Button.md#theme-key-Button-root), at the default control height with the icon-aware narrower padding kicking in when the trigger carries an icon.

Default classes:

`h-vueda-control px-vueda-control-px has-[>svg]:px-vueda-control-px-sm`

Composes: `_ButtonBase.root` `_ButtonOutline.root`

Source: `client/lib/theme/vueda-tailwind/controls/FileUpload.theme.js:36`

<a id="theme-key-FileUpload-dropMessage"></a>

## dropMessage

> The "or drop here" helper line below the trigger. Muted secondary text at the sm tier so it sits as ancillary copy and never competes with the trigger label or a selected-file readout.

Default classes:

`text-sm text-muted-foreground`

Source: `client/lib/theme/vueda-tailwind/controls/FileUpload.theme.js:44`