FileInput API Reference

Props

Prop	Type	Default	Description
label	String	Based on multiple	Label for the file input
maxFiles	Number	-	Maximum number of files that can be selected
maxSize	Number	-	Maximum file size in bytes
multiple	Boolean	false	Allow selection of multiple files
modelValue	Object/Array	-	v-model binding value
value	Object/Array	-	Alternative to modelValue
chip	Boolean	false	Display selected files as chips
persistentDetails	Boolean	true	Always show validation details
accept	String	-	File types to accept (e.g., ".jpg,.png")

Events

The component emits many standard DOM events, including:

Event	Payload	Description
update:modelValue	File/Files	Emitted when files are selected or removed
change	Event	Emitted when files change
focus	Event	Emitted when input receives focus
blur	Event	Emitted when input loses focus
dragenter	Event	Emitted when drag enters the component
dragover	Event	Emitted when drag is over the component
dragleave	Event	Emitted when drag leaves the component
drop	Event	Emitted when files are dropped

Slots

Slot	Props	Description
prepend	{ props }	Content before the input
append-inner	{ props }	Content inside the input, at the end
append	{ props }	Content after the input

Methods

The component doesn't explicitly expose methods via template refs.

Example Usage

<template>
  <OFileInput
    v-model="files"
    label="Upload Documents"
    :multiple="true"
    :maxFiles="5"
    :maxSize="5000000"
    accept=".pdf,.docx,.txt"
    :chip="true"
    @update:modelValue="handleFilesChange"
  />
</template>

<script setup>
import { ref } from 'vue'
import { OFileInput } from 'your-component-library'

const files = ref([])

const handleFilesChange = (newFiles) => {
  console.log('Files selected:', newFiles)
}
</script>

Validation

The component performs validation on:

• Maximum number of files
• Maximum file size
• File type (based on the accept prop)

Error messages are displayed when validation fails.