Preview Updated 2026-05-10

File picker

Button-triggered file dialog with a built-in selected file list. Distinct from Dropzone (drag-and-drop area).

Basic usage

multiple for multi-select; accept for MIME / extension filtering. Selected files appear as chips next to the button — remove individually or clear all at once.

背景

未选择文件

<script setup lang="ts">
import { ref } from 'vue';
import { CfFilePicker } from '@chufix-design/vue';
const files = ref<File[]>([]);
</script>

<template>
  <CfFilePicker v-model="files" multiple accept="image/*,application/json" />
</template>

<CfFilePicker value={files} onChange={setFiles} multiple accept="image/*" />

Variant / size / disabled

variant="plain" removes the button border for a link-style trigger. disabled disables the whole control.

背景

single + outline

未选择文件

multiple + plain + size lg

未选择文件

disabled

未选择文件

<script setup lang="ts">
import { ref } from 'vue';
import { CfFilePicker } from '@chufix-design/vue';
const a = ref<File[]>([]);
const b = ref<File[]>([]);
const c = ref<File[]>([]);
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <div>
      <span style="font-size: 11px; color: var(--fg-3); margin-right: 8px;">single + outline</span>
      <CfFilePicker v-model="a" accept="image/*" />
    </div>
    <div>
      <span style="font-size: 11px; color: var(--fg-3); margin-right: 8px;">multiple + plain + size lg</span>
      <CfFilePicker v-model="b" multiple variant="plain" size="lg" button-text="批量上传" />
    </div>
    <div>
      <span style="font-size: 11px; color: var(--fg-3); margin-right: 8px;">disabled</span>
      <CfFilePicker v-model="c" disabled />
    </div>
  </div>
</template>

<CfFilePicker value={files} onChange={setFiles} variant="plain" size="lg" multiple />

API

Prop	Type	Default	Description
`modelValue` / `value`	`File[]`	`[]`
`multiple`	`boolean`	`false`
`accept`	`string`	—	Same as native `<input type=file>`
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`
`variant`	`'outline' \| 'plain'`	`'outline'`
`disabled` / `showFiles`	`boolean`	`false` / `true`
`buttonText` / `emptyText`	`string`	`'Choose files'` / `'No file selected'`