FileCard

Display files in the form of cards.

When to use

• Used to display files during conversation or input.

Examples

Basic usage

excel-has-long-long-long-name.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

markdown-file.md

1 KB

java-file.java

1 KB

javascript-file.js

1 KB

python-file.py

1 KB

excel-file.xlsx

1 KB

Basic usage

Different file types pick matching icons and colors.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardBasicV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard name="excel-has-long-long-long-name.xlsx" byte={1024} />
    <FileCard name="word-file.docx" byte={1024} />
    <FileCard name="pdf-file.pdf" byte={1024} />
    <FileCard name="ppt-file.pptx" byte={1024} />
    <FileCard name="zip-file.zip" byte={1024} />
    <FileCard name="txt-file.txt" byte={1024} />
    <FileCard name="markdown-file.md" byte={1024} />
    <FileCard name="java-file.java" byte={1024} />
    <FileCard name="javascript-file.js" byte={1024} />
    <FileCard name="python-file.py" byte={1024} />
    <FileCard styles={{ file: { width: '350px' } }} name="excel-file.xlsx" byte={1024} />
  </Flex>
));
</script>

Hide source

Card size

pdf-file.pdf

1 KB

pdf-file.pdf

1 KB

Card size

Set the card size through the size property.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardSizeV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard name="pdf-file.pdf" byte={1024} size="small" />
    <FileCard name="pdf-file.pdf" byte={1024} size="default" />
  </Flex>
));
</script>

Hide source

Image files

Preview

Preview

image-file.png

1 KB

Image files

Image type files will automatically show image previews. You can force display as a file card using type="file".

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardImageV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard
      name="image-file.png"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
    <FileCard
      styles={{
        file: {
          width: '100px',
          height: '100px',
        },
      }}
      name="image-file.png"
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
    <FileCard
      type="file"
      name="image-file.png"
      byte={1024}
      src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
    />
  </Flex>
));
</script>

Hide source

Image loading

0%

0%

Image loading

Show a loading animation while images load.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardImageLoadingV2' });

import { FileCard } from 'ant-design-x-vue';
import { Button, Flex, Space } from 'ant-design-vue';
import { ref } from 'vue';

const loading = ref(true);
const src = ref('');

defineRender(() => (
  <Flex gap="middle" vertical>
    <Space>
      <Button
        disabled={loading.value}
        onClick={() => {
          loading.value = true;
          src.value = '';
        }}
      >
        Start Loading
      </Button>
      <Button
        onClick={() => {
          src.value = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png';
          setTimeout(() => {
            loading.value = false;
          }, 400);
        }}
      >
        Load Complete
      </Button>
    </Space>

    <FileCard
      loading={loading.value}
      styles={{ file: { width: '200px' } }}
      spinProps={{ size: 'small' }}
      name="image-file.png"
      src={src.value ? `${src.value}?${Date.now()}` : ''}
    />
    <FileCard
      loading={loading.value}
      name="image-file.png"
      src={src.value ? `${src.value}?${Date.now()}` : ''}
    />
  </Flex>
));
</script>

Hide source

Audio and video

audio-file.mp3

1 KB

video-file.mp4

1 KB

Audio and video

Audio and video type files support inline playback, and can also be displayed as file cards using type="file".

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardAudioV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard
      name="audio-file.mp3"
      src="https://mdn.alipayobjects.com/cto_doraemon/afts/file/HFTcTLugiIAAAAAAgCAAAAgAehe3AQBr"
    />
    <FileCard
      name="video-file.mp4"
      src="https://mdn.alipayobjects.com/doraemon_plugin/afts/file/vl7tSa-m3jEAAAAAAAAAAAAAeur1AQBr"
    />
    <FileCard name="audio-file.mp3" byte={1024} type="file" />
    <FileCard name="video-file.mp4" byte={1024} type="file" />
  </Flex>
));
</script>

Hide source

Overlay mask

txt-file.txt

1 KB

Overlay mask

Add overlay content through the mask property.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardMaskV2' });

import { FileCard } from 'ant-design-x-vue';
import { VerticalAlignBottomOutlined } from '@ant-design/icons-vue';

const onDownload = () => {
  const blob = new Blob(['123'], { type: 'text/plain' });
  const a = document.createElement('a');
  const href = URL.createObjectURL(blob);
  a.href = href;
  a.download = 'txt-file.txt';
  document.body.appendChild(a);
  a.click();
  document.body.removeChild(a);
  URL.revokeObjectURL(href);
};

defineRender(() => (
  <FileCard
    name="txt-file.txt"
    byte={1024}
    mask={<VerticalAlignBottomOutlined style={{ fontSize: '20px' }} onClick={() => onDownload()} />}
  />
));
</script>

Hide source

Custom icon

txt-file.txt

1 KB

android-file.apk

1 KB

Custom icon

Customize icons through the icon property, supporting preset icon names or custom VNode.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardIconV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';
import { AndroidOutlined } from '@ant-design/icons-vue';

defineRender(() => (
  <Flex vertical gap="middle">
    <FileCard icon="pdf" name="txt-file.txt" byte={1024} />
    <FileCard
      icon={<AndroidOutlined style={{ fontSize: '36px', color: '#22b35e' }} />}
      name="android-file.apk"
      byte={1024}
    />
  </Flex>
));
</script>

Hide source

File list

excel-file.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

excel-file.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

File list

Display file lists using FileCard.List, supporting deletion and image preview.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardListV2' });

import { FileCard } from 'ant-design-x-vue';
import { Flex } from 'ant-design-vue';

const files = [
  { name: 'excel-file.xlsx', byte: 1024 },
  { name: 'word-file.docx', byte: 1024 },
  { name: 'pdf-file.pdf', byte: 1024 },
  { name: 'ppt-file.pptx', byte: 1024 },
  { name: 'zip-file.zip', byte: 1024 },
  { name: 'txt-file.txt', byte: 1024 },
];

defineRender(() => (
  <Flex vertical gap="middle" style={{ width: '900px' }}>
    <FileCard.List items={files} removable />
    <FileCard.List items={files} removable size="small" />
    <FileCard.List
      items={new Array(6).fill({
        name: 'image-file.png',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      })}
    />
    <FileCard.List
      styles={{ file: { width: '230px', height: '230px' } }}
      items={new Array(3).fill({
        name: 'image-file.png',
        src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
      })}
    />
  </Flex>
));
</script>

Hide source

Overflow style

Wrap

Scroll X

Scroll Y

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

Preview

excel-file.xlsx

1 KB

word-file.docx

1 KB

pdf-file.pdf

1 KB

ppt-file.pptx

1 KB

zip-file.zip

1 KB

txt-file.txt

1 KB

Overflow style

Control the display style when the list overflows through the overflow property.

<script setup lang="tsx">
defineOptions({ name: 'AXFileCardOverflowV2' });

import { FileCard } from 'ant-design-x-vue';
import type { FileCardListProps } from 'ant-design-x-vue';
import { Flex, Segmented } from 'ant-design-vue';
import { ref } from 'vue';

const images = Array.from({ length: 11 }).map((_, index) => ({
  name: `image-file-${index}.png`,
  src: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
  byte: 1024,
}));

const files = [
  { name: 'excel-file.xlsx', byte: 1024 },
  { name: 'word-file.docx', byte: 1024 },
  { name: 'pdf-file.pdf', byte: 1024 },
  { name: 'ppt-file.pptx', byte: 1024 },
  { name: 'zip-file.zip', byte: 1024 },
  { name: 'txt-file.txt', byte: 1024 },
];

const overflow = ref<FileCardListProps['overflow']>('wrap');

defineRender(() => (
  <Flex vertical gap="middle">
    <Segmented
      options={[
        { value: 'wrap', label: 'Wrap' },
        { value: 'scrollX', label: 'Scroll X' },
        { value: 'scrollY', label: 'Scroll Y' },
      ]}
      value={overflow.value}
      onChange={(val: any) => (overflow.value = val)}
      style={{ marginInlineEnd: 'auto' }}
    />
    <FileCard.List items={[...images, ...files]} removable overflow={overflow.value} />
  </Flex>
));
</script>

Hide source

API

FileCardProps

Prop	Description	Type	Default	Version
name	File Name	string	-	-
byte	File size (bytes)	number	-	-
size	Card Size	'small' | 'default'	'default'	-
description	Document Description	VNode | string	-	-
loading	Is it in loaded mode	boolean	false	-
type	File Type	'file' | 'image' | 'audio' | 'video' | string	-	-
src	Image or File Address	string	-	-
mask	Mask Content	VNode | string	-	-
icon	Custom icon	VNode	PresetIcons	-
imageProps	Image properties, same as ant-design-vue Image properties	ImageProps	-	-
videoProps	Video Attribute Configuration	Record<string, any>	-	-
audioProps	Audio Attribute Configuration	Record<string, any>	-	-
spinProps	Loading Properties	[SpinProps] (https://www.antdv.com/components/spin-cn#api) & { showText?: boolean; icon?: VNode }	-	-
onClick	Click event callback	() => void	-	-

PresetIcons

Preset icon types, supporting the following values:

type PresetIcons =
  | 'default'    // 默认文件图标
  | 'excel'      // Excel 文件图标
  | 'image'      // 图片文件图标
  | 'markdown'   // Markdown 文件图标
  | 'pdf'        // PDF 文件图标
  | 'ppt'        // PowerPoint 文件图标
  | 'word'       // Word 文件图标
  | 'zip'        // 压缩文件图标
  | 'video'      // 视频文件图标
  | 'audio'      // 音频文件图标
  | 'java'       // Java 文件图标
  | 'javascript' // JavaScript 文件图标
  | 'python';    // Python 文件图标

FileCard.List

File list component, used to display multiple file cards.

Prop	Description	Type	Default	Version
items	File list data. Each item is FileCardProps, and key can be used as a stable identifier; defaults to name-index if missing	(FileCardProps & { key?: string	number })[]	-
size	Card Size	'small' | 'default'	'default'	-
removable	Whether it can be deleted	boolean	((item: FileCardProps) => boolean)	false
onRemove	Remove event callback	(item: FileCardProps) => void	-	-
extension	Extended content	VNode	-	-
overflow	Overflow display method	'scrollX'	'scrollY'	'wrap'

Semantic DOM

pdf-file.pdf

1 KB

• root

  根节点

• file

  文件

• icon

  图标

• name

  名称

• description

  描述

excel-file.xlsx

1 KB

excel-file.xlsx

1 KB

excel-file.xlsx

1 KB

• root

  根节点

• card

  卡片

• file

  文件

• icon

  图标

• name

  名称

• description

  描述

Design Token

This component has no custom Component Token. Customize it through global Design Tokens.