FileUpload

Form

A drag-and-drop file upload zone with file type validation, size limits, and a file list.

Props

Prop	Type	Default	Description
`modelValue`	`File[]`	`[]`	Selected files (v-model).
`accept`	`string`	`–`	Accepted file types (MIME or extensions).
`multiple`	`boolean`	`false`	Allow multiple files.
`maxSize`	`number`	`–`	Max file size in bytes.
`maxFiles`	`number`	`–`	Max number of files.
`disabled`	`boolean`	`false`	Disables the drop zone.

Examples

Default

Click to upload or drag and drop

.pdf,.png,.jpg

Max 5.0 MB

vue

<script setup>
const files = ref([])
</script>
<template>
  <DsFileUpload
    v-model="files"
    accept=".pdf,.png,.jpg"
    :multiple="true"
    :max-size="5 * 1024 * 1024"
  />
</template>

Skeleton

Use DsFileUploadSkeleton as a loading placeholder while content is being fetched.

Default

vue

<DsFileUploadSkeleton />

Accessibility

Drag zone has role="button" with tabindex.
Keyboard: Enter or Space opens file picker.
Error messages are displayed inline.

DateRangePicker

HelpText