Components / Forms

FileUpload

A native file input with picker, drag-and-drop, removal, and localized labels.

Preview

Drop images or PDFs hereChoose files

Install

Run in your project

npx @getweini/cli@latest add file-upload

Use cases

Profile image

Accept one image through the picker or drop area.

Case attachments

Collect several PDFs or images and allow removal before submission.

Usage example

Vue

<script setup lang="ts">
import { ref } from 'vue'
import FileUpload from './components/ui/file-upload/FileUpload.vue'
const files = ref<File[]>([])
const messages = {
  browse: 'Choose files',
  drop: 'Drop files here',
  clear: 'Clear',
  selectedCount: (count: number) => count + ' files selected',
  removeFile: (name: string) => 'Remove ' + name,
}
</script>

<template>
  <FileUpload
    v-model="files"
    name="attachments"
    accept="image/*,.pdf"
    multiple
    class="max-w-md"
    :messages="messages"
  />
</template>

More examples

Avatar image

accept filters picker and drop selection consistently.

Avatar image

<script setup lang="ts">
import { ref } from 'vue'
import FileUpload from './components/ui/file-upload/FileUpload.vue'
const files = ref<File[]>([])
const messages = {
  browse: 'Choose image', drop: 'Drop image here', clear: 'Clear',
  selectedCount: (count: number) => count + ' selected',
  removeFile: (name: string) => 'Remove ' + name,
}
</script>
<template>
  <label for="avatar">Profile image</label>
  <FileUpload id="avatar" v-model="files" name="avatar" accept="image/*" :messages="messages" />
</template>

Multiple attachments

The model contains the selected File objects; upload them in your form flow.

Multiple attachments

<script setup lang="ts">
import { ref } from 'vue'
import FileUpload from './components/ui/file-upload/FileUpload.vue'
const files = ref<File[]>([])
const messages = {
  browse: 'Choose attachments', drop: 'Drop attachments here', clear: 'Clear all',
  selectedCount: (count: number) => count + ' files selected',
  removeFile: (name: string) => 'Remove ' + name,
}
function reportRejected(rejected: File[]) { console.warn('Unsupported files', rejected) }
</script>
<template>
  <label for="attachments">Attachments</label>
  <FileUpload id="attachments" v-model="files" name="attachments" accept="image/*,.pdf" multiple :messages="messages" @reject="reportRejected" />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for FileUpload
Name	Type	Default or requirement
`v-model`	File[]	[]
`messages`	FileUploadMessages	required
`accept`	string	any file
`multiple / required / disabled / invalid`	boolean	false
`id / name / form`	string	undefined
`capture`	boolean \| user \| environment	undefined
`size`	sm \| md \| lg	md
`select / reject`	events with File[]	—

The native file input participates in forms. Use class and style on FileUpload to customize its visible surface. Dropped files follow the accept filter; upload the selected files and show validation messages in your application.

Implementation notes

The component selects files; your application uploads and handles server errors.
Picker and drop paths use the same accept rules; rejected files arrive through reject.

Accessibility and localization

Localize all action and count messages. Connect requirements and errors using aria-describedby.