FileUploader

FileUploader is a drag-and-drop upload zone with file validation, file list display, and remove support.

ExamplesCodeUsageChangelog

Basic usage

Drag and drop files here, or click to browse

0 file(s) selected

Tailwind v4

<script setup>
import { ref } from 'vue'
const files = ref([])
</script>

<FileUploader v-model="files" multiple />

With accept and max size

Upload images (max 2 MB each)

Accepted: image/*

Max size: 2.0 MB

Tailwind v4

<FileUploader
  v-model="files"
  accept="image/*"
  :max-size="2 * 1024 * 1024"
  label="Upload images (max 2 MB each)"
  multiple
  @error="msg => console.error(msg)"
/>

Disabled

Upload disabled

Tailwind v4

<FileUploader :disabled="true" />

Props

Prop	Type	Default	Description
modelValue	File[]	—	Selected files (use with v-model)
accept	string	—	Accepted MIME types/extensions e.g. 'image/*,.pdf'
multiple	boolean	false	Allow multiple file selection
maxSize	number	—	Max file size in bytes
disabled	boolean	false	Disables the drop zone
label	string	'Drag and drop files here, or click to browse'	Drop zone label text

Events

Event	Payload	Description
update:modelValue	File[]	Emitted when files change
error	string	Emitted when a file fails validation (wrong type or too large)