IFileUpload ​

A drag-and-drop file field, with a browse button and a list of what has been picked.

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

<template>
  <IFileUpload v-model="logo" />
</template>

The model is always a File[], even without multiple — in that case an array holding at most one file, and picking again replaces it.

Multiple files ​

<IFileUpload v-model="attachments" multiple label="Drop your attachments here" hint="Any file type" />

Image files get a thumbnail and everything else a placeholder of the same size. The object URLs behind the thumbnails are revoked when a file leaves the list or the component unmounts.

Accepted types and sizes ​

accept uses the native syntax — image/*, .pdf, image/png — and is enforced on dragged-in files as well as on the browse dialog.

<IFileUpload
  v-model="logo"
  accept="image/*"
  :max-size="2 * 1024 * 1024"
  label="Drag your logo here"
  browse-label="Browse images"
  hint="PNG, JPG or SVG up to 2 MB"
/>

Put the accepted types in hint: label is the instruction, hint is the fine print.

Capping the count ​

<IFileUpload v-model="files" multiple :max-files="3" hint="Up to three files" />

Rejections ​

Refused files raise @reject once per drop, with an array of { file, reason }, where reason is 'type', 'size' or 'count'. The messages shown on the rows come from tooLargeText, wrongTypeText and tooManyText.

<IFileUpload
  v-model="files"
  accept="application/pdf"
  :max-size="1024"
  hint="PDFs under 1 KB — most things will bounce"
  @reject="rejections => toast.error(`${rejections.length} file(s) refused`)"
/>

Invalid and disabled ​

<IFileUpload v-model="files" invalid />
<IFileUpload v-model="files" disabled />

Inside an IFormField the field passes its own validity down, so invalid rarely needs setting by hand.

Props ​

Events ​

interface FileRejection {
  file: File
  reason: 'type' | 'size' | 'count'
}

Model ​

const files = ref<File[]>([])

The component never uploads anything: it hands you File objects, and posting them, showing progress and retrying are yours.