FilePicker

File picker that opens the native dialog on click and also accepts files dropped onto it.

Import

import { FilePicker } from 'vuiii'

Basic Usage

Without a slot it renders a button labelled by label. Selected or dropped files arrive through the files event as a File[].

View in Storybook

<script setup>
function handleFiles(files) {
  console.log(files) // File[]
}
</script>

<template>
  <FilePicker label="Choose a file" @files="handleFiles" />
</template>

Props

Prop	Type	Default	Description
multiple	boolean	false	Allows selecting and dropping more than one file
accept	string | string[]	-	Accepted types, as a list or a comma-separated string
label	string	-	Label of the default button trigger
disabled	boolean	false	Blocks both the file dialog and dropped files
invalid	boolean	false	Renders the validation error state

Slots

Slot	Description
default	Replaces the button entirely — the whole area stays clickable and droppable. Props: { disabled, invalid }

Events

Event	Payload	Description
files	File[]	Files chosen in the dialog or dropped

Accepted Types

accept follows the HTML attribute, so all three forms work: an exact MIME type, a wildcard, and a file extension. Give it an array and it is joined for you.

<FilePicker multiple accept="image/*" label="Upload images" @files="handleFiles" />
<FilePicker :accept="['image/png', 'image/jpeg', '.pdf']" label="Upload documents" @files="handleFiles" />

The filter applies to dropped files as well, not just to the native dialog — anything that does not match is discarded before the event fires.

Single vs multiple

Without multiple, a drop of several files keeps only the first, matching what the native dialog allows.

Custom Trigger

The default slot replaces the button with anything you like, and the whole area remains both clickable and a drop target — which is how you build a dropzone.

<FilePicker accept="image/*" @files="handleFiles">
  <div class="dropzone">
    <Icon name="arrow-up-tray" size="large" />
    <span>Drop files here, or click to browse</span>
  </div>
</FilePicker>

Dropping Images From Another Page

An image dragged out of another browser tab arrives as an HTML fragment rather than a file. FilePicker resolves it and still hands you a File, so the drop works either way.

Building your own drop target

FilePicker is a thin layer over useDropArea, which gives you the same drop handling plus an isDropzoneActive flag for styling — use it directly when you need a drop target that is not a picker.

Storybook

For interactive examples with all variants, see FilePicker in Storybook.