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.

背景视口

未选择文件

src/App.vue

<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>

<script setup>
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>

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [files, setFiles] = useState([]);
  const [files, setFiles] = useState([]);
  return (
    <>
      <CfFilePicker value={files} onChange={setFiles} multiple accept="image/*" />
    </>
  );
}

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [files, setFiles] = useState([]);
  const [files, setFiles] = useState([]);
  return (
    <>
      <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.

背景视口

未选择文件

disabled

未选择文件

src/App.vue

<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>
      <CfFilePicker v-model="a" accept="image/*" />
    </div>
    <div>
      <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>

<script setup>
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>
      <CfFilePicker v-model="a" accept="image/*" />
    </div>
    <div>
      <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>

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<File[]>([]);
  const [b, setB] = useState<File[]>([]);
  const [c, setC] = useState<File[]>([]);
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <CfFilePicker value={a} onChange={setA} accept="image/*" />
          </div>
          <div>
            <CfFilePicker value={b} onChange={setB} multiple variant="plain" size="lg" button-text="批量上传" />
          </div>
          <div>
            <span style={{ fontSize: 11, color: "var(--fg-3)", marginRight: 8 }}>disabled</span>
            <CfFilePicker value={c} onChange={setC} disabled />
          </div>
        </div>
    </>
  );
}

import { useState } from 'react';
import { CfFilePicker } from '@chufix-design/react';

export default function Demo() {
  const [a, setA] = useState<File[]>([]);
  const [b, setB] = useState<File[]>([]);
  const [c, setC] = useState<File[]>([]);
  return (
    <>
      <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
          <div>
            <CfFilePicker value={a} onChange={setA} accept="image/*" />
          </div>
          <div>
            <CfFilePicker value={b} onChange={setB} multiple variant="plain" size="lg" button-text="批量上传" />
          </div>
          <div>
            <span style={{ fontSize: 11, color: "var(--fg-3)", marginRight: 8 }}>disabled</span>
            <CfFilePicker value={c} onChange={setC} disabled />
          </div>
        </div>
    </>
  );
}

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'`