FilePicker

File picker with drag-and-drop support. Opens native file dialog on click and accepts files dropped onto the component.

Import

import { FilePicker } from 'vuiii'

Basic Usage

View in Storybook

// Basic usage import { FilePicker } from 'vuiii'

<FilePicker @files="handleFiles" />

More Examples

// Multiple files with accept filter
<FilePicker multiple accept="image/*" label="Upload Images" @files="(files) => (images = files)" />

// Multiple accept types as array
<FilePicker :accept="['image/png', 'image/jpeg', '.pdf']" label="Upload Documents" @files="handleFiles" />

// Custom trigger with slot
<FilePicker accept="image/*" @files="handleFiles">
  <div class="dropzone">
    <Icon name="cloud-upload" />
    <span>Drop files here or click to upload</span>
  </div>
</FilePicker>

Storybook

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