FileInput

Native file input with drop zone

A form field that takes files: click or drop, see what was picked, remove one. Submits with the form like any other field. When the files start uploading the moment they land — progress, retry, a queue — that is Uploader.

Basic

⇪Drop files here or click to browsePNG, JPG or PDF · up to 10 MB

⇪Single, invalid

⇪Disabled

<script setup lang="ts">
import { ref } from "vue";
import { BlessFileInput } from "blessing-ui";
const files = ref<File[]>([]);
</script>

<template>
  <div class="col" style="max-width: 480px">
    <BlessFileInput
      v-model="files"
      multiple
      accept="image/*,.pdf"
      hint="PNG, JPG or PDF · up to 10 MB"
    />
    <BlessFileInput label="Single, invalid" invalid />
    <BlessFileInput label="Disabled" disabled />
  </div>
</template>

• label here is the copy inside the zone. The field's own label comes from a BlessField around it, which also wires id, invalid and describedby.
• accept filters the picker and dropped files, so the hint you write is what gets in.
• The v-model is the truth. With multiple, picks accumulate and remove is per file, which the native <input> cannot mirror — on submit, append files to your FormData rather than reading the input.

Usage

import { BlessFileInput } from "blessing-ui";

API

Props

Name	Type	Default	Description
id	string	—
accept	string	—
multiple	boolean	—
disabled	boolean	—
invalid	boolean	—
label	string	"Drop files here or click to browse"	drop zone copy
hint	string	—
list	boolean	true	show the chosen files under the zone
modelValue	File[]	[]

Events

Name	Payload	Description
update:modelValue	[value: File[]]

Slots

Name	Scope	Description
icon	—
default	—