Components

Dropzone

Standalone dropzone component for drag-and-drop file selection and upload.

Component

View code

Show playground

Drag and drop files here

PDF, IMAGE up to 5MB

Props

Props	Default	Type
`modelValue`	`[]`	`File[]`
`title`	`'Drag and drop files here'`	`string`
`singleFileTitleText`	`'Drag and drop a file here'`	`string`
`description`	—	`string`
`icon`	`'mdi:cloud-upload-outline'`	`string`
`buttonText`	`'Select files'`	`string`
`singleFileButtonText`	`'Select file'`	`string`
`upToText`	`'up to'`	`string`
`allFilesTypeText`	`'All file types'`	`string`
`disabled`	`false`	`boolean`
`multiple`	`false`	`boolean`
`accept`	`'*'`	`string \| string[]`
`maxFileSize`	`5`	`number`
`maxFiles`	`1`	`number`
`fileUploadErrorMessage`	`'The size or format of one ore more files is incorrect.'`	`string`
`itemsLayout`	`DropzoneLayout.LIST`	`DropzoneLayout`
`state`	`DropzoneState.DEFAULT`	`DropzoneState`
`selectFileStrategy`	`FileSelectStrategy.MERGE`	`FileSelectStrategy`
`showSelectButton`	`true`	`boolean`
`showClearAllButton`	`true`	`boolean`
`clearAllButtonText`	`'Clear all'`	`string`
`fileTypeIconMap`	`{}`	`Record<string, string>`
`useServerUpload`	`false`	`boolean`
`uploadUrl`	—	`string`
`deleteUrl`	—	`string`
`uploadHeaders`	`{}`	`Record<string, string>`
`uploadAdditionalData`	`{}`	`Record<string, string \| Blob \| number \| boolean>`
`uploadWithCredentials`	`false`	`boolean`
`uploadingStatusText`	`'Uploading'`	`string`
`successStatusText`	`'Uploaded'`	`string`
`errorStatusText`	`'Upload failed'`	`string`
`pendingStatusText`	`'Pending'`	`string`
`retryIcon`	`'mdi:refresh'`	`string`
`removeIcon`	`'mdi:close'`	`string`
`maxItemsContainerHeight`	—	`number`
`totalProgress`	`0`	`number`
`retryAriaLabel`	`'Retry upload'`	`string`
`removeAriaLabel`	`'Remove file'`	`string`

Usage

modelValue

Binds the selected files array.

 <template>
    <Dropzone v-model="files" />
</template>

<script setup lang="ts">
const files = ref<File[]>([])
</script>

Type: File[]
Default: []

title

Sets the title text used when multiple is true.

 <template>
    <Dropzone title="Drop your files" :multiple="true" />
</template>

Type: string
Default: 'Drag and drop files here'

singleFileTitleText

Sets the title text used when multiple is false.

 <template>
    <Dropzone singleFileTitleText="Drop your file" :multiple="false" />
</template>

Type: string
Default: 'Drag and drop a file here'

description

Overrides the default generated description line.

 <template>
    <Dropzone description="PDF, PNG, JPG up to 10MB" />
</template>

Type: string

buttonText

Sets the select button text used when multiple is true.

 <template>
    <Dropzone buttonText="Choose files" :multiple="true" />
</template>

Type: string
Default: 'Select files'

singleFileButtonText

Sets the select button text used when multiple is false.

 <template>
    <Dropzone singleFileButtonText="Choose file" :multiple="false" />
</template>

Type: string
Default: 'Select file'

upToText

Sets the helper phrase used in the autogenerated description.

 <template>
    <Dropzone upToText="max" />
</template>

Type: string
Default: 'up to'

accept

Sets accepted file types using MIME values and/or extensions.

 <template>
    <Dropzone :accept="['application/pdf', '.png', 'image/*']" />
</template>

Type: string | string[]
Default: '*'

maxFileSize

Sets max file size in MB per file.

 <template>
    <Dropzone :maxFileSize="10" />
</template>

Type: number
Default: 5

maxFiles

Sets max number of files kept in the model.

 <template>
    <Dropzone :maxFiles="10" :multiple="true" />
</template>

Type: number
Default: 1

itemsLayout

Controls file item presentation layout.

 <template>
    <Dropzone itemsLayout="grid" />
</template>

Type: DropzoneLayout
Default: DropzoneLayout.LIST

Options

Value	Description
`LIST`	Shows file items in a vertical list
`GRID`	Shows file items in a thumbnail grid

selectFileStrategy

Controls how newly selected or dropped files are combined.

 <template>
    <Dropzone
        :multiple="true"
        selectFileStrategy="merge"
    />
</template>

Type: FileSelectStrategy
Default: FileSelectStrategy.MERGE

Options

Value	Description
`MERGE`	Adds selected files to current list
`REPLACE`	Replaces current list with selected files

maxItemsContainerHeight

Sets max height (px) for items container and enables vertical scroll.

 <template>
    <Dropzone :maxItemsContainerHeight="320" />
</template>

Type: number

useServerUpload

Enables internal upload/delete flow.

 <template>
    <Dropzone
        :useServerUpload="true"
        uploadUrl="/api/uploads"
        deleteUrl="/api/uploads"
    />
</template>

Type: boolean
Default: false

uploadingStatusText

Sets text used while a file is uploading.

 <template>
    <Dropzone uploadingStatusText="Uploading" />
</template>

Type: string
Default: 'Uploading'

successStatusText

Sets text used when a file upload succeeds.

 <template>
    <Dropzone successStatusText="Uploaded" />
</template>

Type: string
Default: 'Uploaded'

errorStatusText

Sets text used when a file upload fails.

 <template>
    <Dropzone errorStatusText="Upload failed" />
</template>

Type: string
Default: 'Upload failed'

retryIcon

Sets icon names for retry actions.

 <template>
    <Dropzone retryIcon="mdi:refresh" />
</template>

Type: string
Default: 'mdi:refresh'

removeIcon

Sets icon names for remove actions.

 <template>
    <Dropzone removeIcon="mdi:close" />
</template>

Type: string
Default: 'mdi:close'

retryAriaLabel

The retryAriaLabel prop sets the accessible label for the retry button on failed uploads. Override it for i18n.

 <template>
    <Dropzone retryAriaLabel="Reintentar subida" />
</template>

Type: string
Default: 'Retry upload'

removeAriaLabel

The removeAriaLabel prop sets the accessible label for the remove file button. Override it for i18n.

 <template>
    <Dropzone removeAriaLabel="Eliminar archivo" />
</template>

Type: string
Default: 'Remove file'

Example

Basic

 <template>
    <Dropzone
        v-model="files"
        :multiple="true"
        :accept="['application/pdf', 'image/*']"
        :maxFileSize="10"
        :maxFiles="10"
        itemsLayout="grid"
        selectFileStrategy="merge"
        :maxItemsContainerHeight="320"
    />
</template>

<script setup lang="ts">
const files = ref<File[]>([])
</script>

Server Integration Example

 <template>
    <Dropzone
        v-model="files"
        v-model:total-progress="totalProgress"
        :multiple="true"
        :useServerUpload="true"
        uploadUrl="/api/uploads"
        deleteUrl="/api/uploads"
        :uploadHeaders="{
            Authorization: `Bearer ${token}`,
        }"
        :uploadAdditionalData="{
            module: 'feedback',
            userId,
        }"
        uploadingStatusText="Uploading"
        successStatusText="Uploaded"
        errorStatusText="Upload failed"
    />

    <ProgressBar :progress="totalProgress" />
</template>

<script setup lang="ts">
const files = ref<File[]>([])
const totalProgress = ref(0)
const token = 'your-token'
const userId = 123
</script>

Emits

Props	Type
`update:modelValue`	`(files: File[]) => void`
`update:totalProgress`	`(value: number) => void`
`error`	`(message: string) => void`
`file-added`	`(file: File) => void`
`file-removed`	`(file: File) => void`
`clear-all`	`(files: File[]) => void`