;
};
MCP servers typically receive files only through the LLM conversation — every byte burns tokens and inflates latency. File upload components let users send files directly to your backend tools via `CallTool`, keeping binary data out of the context window entirely. This example stays fully client-side to demonstrate the UI mechanics, but in practice you'd wire the DropZone's `on_change` (or a button's `on_click`) to a `CallTool` that sends the base64 payload to your server for processing.
```python Python expandable icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import (
STATE as state, Badge, Button, Card, CardContent, CardFooter,
CardHeader, Column, DropZone,
H3, Muted, Row, Small,
)
from prefab_ui.components.control_flow import Else, ForEach, If
from prefab_ui.actions import PopState, SetState
with Card(css_class="w-full max-w-2xl") as view:
with CardHeader():
with Row(gap=2, align="center"):
H3("File Inbox")
with If(state.files.length()):
Badge(state.files.length(), variant="secondary")
with CardContent():
with Column(gap=4):
DropZone(
icon="inbox",
label="Drop files here",
description="Don't worry, files aren't actually uploaded",
multiple=True,
max_size=10_000_000,
name="files",
)
with If(state.files.length()):
with Column(gap=2):
with ForEach("files") as (i, item):
with Row(gap=3, align="center"):
with Column(gap=0):
Small(item.name)
Muted(f"{item.type} · {item.size} bytes")
Button(
"×",
variant="ghost",
size="sm",
css_class=(
"ml-auto h-6 w-6 p-0"
" text-muted-foreground"
),
on_click=PopState("files", i),
)
with CardFooter():
with Row(align="center", css_class="w-full"):
with If(state.files.length()):
Muted(
f"{state.files.length()}"
f" {state.files.length().pluralize('file')}"
)
with Else():
Muted("No files uploaded")
with If(state.files.length()):
Button(
"Clear all",
variant="outline",
size="sm",
css_class="ml-auto",
on_click=SetState("files", []),
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "w-full max-w-2xl",
"type": "Card",
"children": [
{
"type": "CardHeader",
"children": [
{
"cssClass": "gap-2 items-center",
"type": "Row",
"children": [
{"content": "File Inbox", "type": "H3"},
{
"type": "Condition",
"cases": [
{
"when": "{{ files | length }}",
"children": [{"type": "Badge", "label": "{{ files | length }}", "variant": "secondary"}]
}
]
}
]
}
]
},
{
"type": "CardContent",
"children": [
{
"cssClass": "gap-4",
"type": "Column",
"children": [
{
"name": "files",
"type": "DropZone",
"icon": "inbox",
"label": "Drop files here",
"description": "Don't worry, files aren't actually uploaded",
"multiple": true,
"maxSize": 10000000,
"disabled": false
},
{
"type": "Condition",
"cases": [
{
"when": "{{ files | length }}",
"children": [
{
"cssClass": "gap-2",
"type": "Column",
"children": [
{
"let": {"_loop_10": "{{ $item }}", "_loop_10_idx": "{{ $index }}"},
"type": "ForEach",
"key": "files",
"children": [
{
"cssClass": "gap-3 items-center",
"type": "Row",
"children": [
{
"cssClass": "gap-0",
"type": "Column",
"children": [
{"content": "{{ _loop_10.name }}", "type": "Small"},
{
"content": "{{ _loop_10.type }} \u00b7 {{ _loop_10.size }} bytes",
"type": "Muted"
}
]
},
{
"cssClass": "ml-auto h-6 w-6 p-0 text-muted-foreground",
"type": "Button",
"label": "\u00d7",
"variant": "ghost",
"size": "sm",
"disabled": false,
"onClick": {"action": "popState", "key": "files", "index": "{{ _loop_10_idx }}"}
}
]
}
]
}
]
}
]
}
]
}
]
}
]
},
{
"type": "CardFooter",
"children": [
{
"cssClass": "items-center w-full",
"type": "Row",
"children": [
{
"type": "Condition",
"cases": [
{
"when": "{{ files | length }}",
"children": [
{
"content": "{{ files | length }} {{ files | length | pluralize:file }}",
"type": "Muted"
}
]
}
],
"else": [{"content": "No files uploaded", "type": "Muted"}]
},
{
"type": "Condition",
"cases": [
{
"when": "{{ files | length }}",
"children": [
{
"cssClass": "ml-auto",
"type": "Button",
"label": "Clear all",
"variant": "outline",
"size": "sm",
"disabled": false,
"onClick": {"action": "setState", "key": "files", "value": []}
}
]
}
]
}
]
}
]
}
]
}
}
```
## How It Works
The [DropZone](/docs/components/drop-zone) is bound to state by its `name="files"` prop. When a user drops files, the renderer reads each one and writes a list of file descriptors into the `files` [state](/docs/concepts/state) key — each entry is an object with `name`, `type`, and `size` fields, plus the base64-encoded contents. Everything else on the page is a reactive function of that list. `STATE as state` imports the state accessor so the Python reads naturally as `state.files`, and `state.files.length()` compiles to a [reactive expression](/docs/concepts/expressions) the renderer re-evaluates whenever the list changes.
That length expression drives the page's conditional structure. The header [Badge](/docs/components/badge), the file rows, and the footer message are each wrapped in `If(state.files.length())`, so they appear only once at least one file is present; the `Else()` branch in the footer shows "No files uploaded" otherwise. The file rows themselves come from [`ForEach`](/docs/components/foreach): `with ForEach("files") as (i, item):` walks the list, exposing the loop index `i` and the current descriptor `item`, so `item.name`, `item.type`, and `item.size` render each file's metadata. The per-row `×` button calls `PopState("files", i)` to drop that one file by index, and `Clear all` calls `SetState("files", [])` to empty the list — both client-side [actions](/docs/concepts/actions), so add/remove updates the count, the badge, and the rows with no server involved.
This example stays entirely in the browser to show the UI mechanics, which is why the DropZone is labeled "files aren't actually uploaded." The reason file uploads matter for MCP is the [client/server boundary](/docs/concepts/actions). When an LLM passes a file through the conversation, every byte is tokenized and counted against the context window. A DropZone sidesteps that: the file lands in client state as base64, and you forward it straight to your backend with a [CallTool](/docs/actions/call-tool) action — wiring the DropZone's `on_change` or a submit button's `on_click` to `CallTool(...)` with the payload from `state.files`. The tool runs server-side, processes the bytes, and returns a result; you read `$result` in the action's `on_success` and write it back into state to update the UI. The binary data travels client → server directly and never enters the model's context.