Dropzone
Add files by dragging or browsing; a message names each file that cannot be added and says why.
Contract
Drag a file here, or
Maximum file size: 30 MB
<script setup lang="ts">import { ref } from 'vue'import { UiDropzone } from 'grani' const contract = ref<File[]>([])</script> <template> <UiDropzone v-model="contract" accept="application/pdf,.pdf" :max-size="30 * 1024 * 1024" ariaLabel="Contract" class="w-full max-w-96" /></template>
Also called file upload, file input, drag and drop upload, uploader.
Usage
<UiDropzone v-model="value">…</UiDropzone> With GraniResolver in the Vite config, a template needs no import: set it up once.
API
| Name · type | Default | Description |
|---|---|---|
| Value | ||
| modelValue*File[] | The chosen files (v-model); always an array, one entry at most without multiple. | |
| State | ||
| busyboolean= false | false | Work in progress: the rows not yet uploaded carry it, choosing and removing wait until it ends. |
| Behavior | ||
| acceptstring | Accepted file types, native accept syntax: image/*, .pdf,.docx, application/pdf. | |
| multipleboolean= false | false | Allows choosing several files; without it a new file replaces the old one. |
| maxFilesnumber | Maximum number of files, with multiple; ignored without it. | |
| maxSizenumber | Maximum file size in bytes; also said under the main line unless #hint is given. | |
| progressnumber | null= null | null | Upload progress 0 to 100 shown with busy; null when unknown. The files listed when it reaches 100 are marked uploaded. |
| failedstring | boolean= false | false | The last upload failed: the rows not uploaded say so, with this reason when it is a string, and offer Retry. |
| removablefalse | true | auto= "auto" | "auto" | Whether the files can be removed. auto: yes, except the ones a finished upload marked. |
| Form and access | ||
| disabledboolean= false | false | Prevents choosing, dropping and removing. |
| invalidboolean= false | false | Marks the control as invalid. Inside UiField, the error state sets this automatically. |
| namestring | Native name of the file input: a plain form submit sends the listed files. | |
| idstring | Own id when standalone. Inside UiField, the field's id takes precedence. | |
| ariaLabelstring | Name when there is no visible label; the browse button reads it followed by its own words, "Choose a file" or "Choose files". | |
Attributes: class and style stay on the outer element; the rest (native attributes, aria-*, data-testid) reach the control inside it.
When to use another component
| When you need | Take |
|---|---|
| Names typed or pasted one per line | List field |
| A typed value | Input |
| Files already on a record | List item rows in a List, listed without choosing |