# Dropzone

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](/components/inputs/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.




<br>

Source: Markdown

```aardvark
{% dropzone accept='image/png,image/jpeg' maxSize=5242880 h='180' %}
**Drag images here** or click to choose — PNG or JPEG, up to 5&nbsp;MB.
{% endDropzone %}
```


Source: Python

```python
component('aardvark', 'dropzone',
          accept='image/png,image/jpeg', maxSize=5242880, h='180',
          children='**Drag images here** or click to choose — PNG or JPEG, up to 5 MB.')
```



## 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.




<br>

Source: Markdown

```aardvark
{% dropzone multiple=false accept='application/pdf' %}
Drop a single **PDF**, or click to browse.
{% endDropzone %}

{% dropzone disabled=true %}
Uploads are paused right now.
{% endDropzone %}
```


Source: Python

```python
component('aardvark', 'dropzone', multiple=False, accept='application/pdf',
          children='Drop a single **PDF**, or click to browse.')

component('aardvark', 'dropzone', disabled=True,
          children='Uploads are paused right now.')
```



## 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. |
| `multiple` | bool (`true` / `false`) | Allow several files at once (default `true`). |
| `loading` | bool (`true` / `false`) | Show a loading overlay over the zone. |
| `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 | Form control name submitted with the value. |

## 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.


```css
/* 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



<br>

Source: Markdown

```aardvark
{% dropzone attr={'onchange': '''
const value = Array.from(event.target.files || []).map((file) => file.name).join(', ') || event.target.value;
console.log('attr demo value:', value);
alert(value || 'No files selected');
'''} %}Drop files here{% endDropzone %}
```


Source: Python

```python
component('aardvark', 'dropzone', children='Drop files here', attr={'onchange': '''
const value = Array.from(event.target.files || []).map((file) => file.name).join(', ') || event.target.value;
console.log('attr demo value:', value);
alert(value || 'No files selected');
'''})
```