components · forms & controls
TuxFileDropzone
Accessible drag-and-drop file upload target supporting format filtering, size and count constraints, file removal affordances, and keyboard selection.
interactive showcase
Dropzone Target
Max MB:
usage syntax
Code snippet
vue
<TuxFileDropzone
v-model="files"
multiple
:max-files="5"
:max-size="25 * 1024 * 1024"
accept=".csv,.json,.parquet,.geojson"
hint="Drop transportation telemetry, crash records, or corridor GIS data here."
/>api reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| v-model | File[] | [] | Two-way bound array of currently staged files. |
| accept | string | undefined | Comma-separated extension or MIME pattern (e.g. ".csv,.json"). |
| multiple | boolean | false | Allows staging multiple files simultaneously. |
| maxSize | number | 50 MB | Maximum allowed file size per item in bytes. |
| maxFiles | number | 10 | Upper limit on staged files when multiple is true. |