Dropzone

The built-in dropzone tag — a drag-and-drop file upload zone with a built-in drag-state overlay. Usage, the accept/maxSize props, a live example, CSS selectors, and injecting attributes.

A drag-and-drop file upload zone: drop files onto it, or click it to open the native file picker. It shows a built-in drag-state overlay (an accept/reject tint as files hover) and hydrates into an interactive island. Reach for it when a file field needs a generous drop target rather than the compact FileInput button.

Restrict what it takes with accept (a comma-separated MIME list or a JSON array), cap file size with maxSize (bytes), and toggle multiple, loading, and disabled. The block body is the zone’s resting content — the prompt a visitor sees before they drag anything in. After a file is dropped or selected, the zone shows the selected file names.

Use it as {% dropzone %}…{% endDropzone %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'dropzone', …).

A basic zone

The block body is the prompt; accept and maxSize constrain what may be dropped.

Drag images here or click to choose — PNG or JPEG, up to 5 MB.

Source: Markdown

Source: Python

Single file, disabled, and loading

multiple is on by default; set multiple=false for a one-file zone. loading overlays a spinner and disabled greys the zone out and stops it capturing files.

Drop a single PDF, or click to browse.

Uploads are paused right now.

Source: Markdown

Source: Python

Attributes

Omit any attribute to take its Mantine default.

Attribute	Valid values	Description
`accept`	MIME list (`image/png,image/jpeg`) or a JSON array	Restrict accepted file types; omit to accept any file.
`maxSize`	integer (bytes)	Maximum size of a single file. Unlimited when omitted.
`multiple`	bool (`true` / `false`)	Allow several files at once (default `true`).
`loading`	bool (`true` / `false`)	Show a loading overlay over the zone. It also stops the zone accepting files while it’s on.
`disabled`	bool (`true` / `false`)	Disable file capturing and grey the zone out.
`radius`	`xs`–`xl` or a CSS length	Corner radius.
`h`	number or CSS length	Height of the zone.
`minHeight`	number or CSS length	Minimum height of the zone.
`maw`	number or CSS length	Maximum width of the zone.
`name`	string	`name` for the hidden file input, so a surrounding `<form>` can pick the files up.
`attr`	dict (`attr={…}`)	Raw HTML attributes (e.g. `onchange`) applied to the zone’s root element.
(body)	Markdown	The zone’s resting content. In Python, pass it as `children`.

Good to know

The zone collects files; it doesn’t upload them. Dropping or choosing files updates the summary line under the prompt — the first three names, then “and N more” — and fires a change event carrying them, which is where your own upload code hooks in (see below). Files that miss accept or exceed maxSize are refused and listed as rejected instead, in the same line.

CSS Selectors

The tag mounts as an island, so its rendered markup carries the island’s data attributes plus Mantine’s own component classes — target either to restyle a zone.

/* Every dropzone on the page (the island mount element) */
[data-aardvark-island="Dropzone"] {
  border-style: dashed;
}

/* Mantine's own classes on the hydrated element */
.mantine-Dropzone-root {
  background: var(--mantine-color-gray-0);
}
.mantine-Dropzone-inner {
  padding: 2rem;
}

/* Persistent selected/rejected file summary */
.aardvark-Dropzone-status { }

Injecting Attributes

Pass an attr map to set raw HTML attributes (or inline handlers) on the zone’s rendered root element. Here it is wired to onchange; selecting files from the picker or dropping files into the zone logs the selected file names to the console and alerts them:

Drop files here

Source: Markdown

Source: Python