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.