FileUpload

Usage

v-model is always a File[], even for a single file - click the dropzone or drag files onto it:

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

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

FileUpload only selects and validates files - actually sending them to a server is up to you (a plain fetch/FormData call using whatever's in v-model, whenever you want to trigger it).

Multiple files

multiple allows selecting more than one file at once (each new selection or drop adds to the list rather than replacing it); max-files caps how many are allowed in total:

<SFileUpload v-model="files" multiple :max-files="4" />

Validation

accept (comma-separated MIME types/wildcards like image/*, or extensions like .pdf) and max-size (bytes) reject files that don't match - applied to both the native file dialog and anything dropped (drops bypass the dialog's own filtering entirely). Rejected files never reach v-model - listen for @error to find out why and surface it however you like:

<SFileUpload
  v-model="files"
  accept="image/*"
  :max-size="1024 * 1024"
  @error="(rejected) => console.log(rejected)"
/>

Color

<SFileUpload color="success" />

Forms integration

Wrap it in FormField to get id/name/invalid and aria-describedby wired up automatically - invalid falls back to FormField's own state when not set directly on the file upload, and size does the same.

Custom :ui

To see exactly what you'd be overriding - the current default classes for every slot and variant - here's FileUpload's own theme file:

Props

Events

Slots