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`)"
/>

Upload progress ​

The component doesn't upload anything, but it can show how your upload is going. statusFor returns a file's state, and the row follows it: a bar and percentage while uploading, "Uploaded" when done, the error and a retry button when it failed. Leave progress out for an indeterminate bar.

<script setup lang="ts">
import type { FileUploadStatus } from 'iryx-ui'

const files = ref<File[]>([])
const status = reactive(new Map<File, FileUploadStatus>())

async function upload(file: File) {
  status.set(file, { state: 'uploading', progress: 0 })
  try {
    await post(file, percent => status.set(file, { state: 'uploading', progress: percent }))
    status.set(file, { state: 'done' })
  }
  catch (error) {
    status.set(file, { state: 'error', error: 'The connection dropped' })
  }
}

watch(files, all => all.filter(f => !status.has(f)).forEach(upload))
</script>

<template>
  <IFileUpload v-model="files" multiple :status-for="f => status.get(f)" @retry="upload" />
</template>

A failure is announced to screen readers once. Progress isn't, since reading out every percent would drown everything else.

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'
}

interface FileUploadStatus {
  state: 'uploading' | 'done' | 'error'
  progress?: number // 0–100
  error?: string
}

Model ​

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

The component never uploads anything: it hands you File objects, and posting them is yours. statusFor and @retry let it show how that's going.