File Input Component Demo

This page demonstrates the File Input component with various configurations and examples.

Basic File Input

A simple file input with a default label.

<template>
  <OFileInput
    label="Upload your file"
    :modelValue="selectedFile"
    @update:modelValue="selectedFile = $event"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFile = ref(null);
</script>

Upload your file

Multiple File Input

A file input that allows selecting multiple files.

<template>
  <OFileInput
    label="Upload your files"
    :multiple="true"
    :modelValue="selectedFiles"
    @update:modelValue="selectedFiles = $event"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFiles = ref([]);
</script>

Upload your files

File Input with Chip Display

A file input that displays selected files as chips.

<template>
  <OFileInput
    label="Upload your files"
    :multiple="true"
    :chip="true"
    :modelValue="selectedFiles"
    @update:modelValue="selectedFiles = $event"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFiles = ref([]);
</script>

Upload your files

File Input with File Type Restrictions

A file input that only accepts specific file types.

<template>
  <OFileInput
    label="Upload images"
    accept="image/*"
    :modelValue="selectedFile"
    @update:modelValue="selectedFile = $event"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFile = ref(null);
</script>

Upload images

File Input with Size Restrictions

A file input with maximum file size and count restrictions.

<template>
  <OFileInput
    label="Upload files (max 2 files, 5MB total)"
    :multiple="true"
    :maxFiles="2"
    :maxSize="5242880"
    :modelValue="selectedFiles"
    @update:modelValue="selectedFiles = $event"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFiles = ref([]);
</script>

Upload files (max 2 files, 5MB total)

File Input with Drag and Drop

The file input component supports drag and drop functionality by default. Try dragging files onto the input area.

<template>
  <OFileInput
    label="Drag and drop files here"
    :multiple="true"
    :modelValue="selectedFiles"
    @update:modelValue="selectedFiles = $event"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFiles = ref([]);
</script>

Drag and drop files here

File Input with Validation

A file input with custom validation rules.

<template>
  <OFileInput
    label="Upload PDF files only"
    accept=".pdf"
    :modelValue="selectedFile"
    @update:modelValue="selectedFile = $event"
    @validate="handleValidation"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedFile = ref(null);

const handleValidation = (validationResult) => {
  console.log("Validation result:", validationResult);
};
</script>

Upload PDF files only

File Input States

File input in different states: disabled and readonly.

<template>
  <div class="state-demo">
    <OFileInput
      label="Normal File Input"
      :modelValue="selectedFile"
      @update:modelValue="selectedFile = $event"
    />

    <OFileInput
      label="Disabled File Input"
      :disabled="true"
      :modelValue="selectedFile"
    />

    <OFileInput
      label="Disabled File Input"
      :disabled="true"
      :modelValue="dummyFile"
    />

    <OFileInput
      label="Readonly File Input"
      :readonly="true"
      :modelValue="selectedFile"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

const selectedFile = ref(null);
</script>

<style>
.state-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Normal File Input

Disabled File Input

Disabled File Input

Readonly File Input