AiFileCard

Display a file in card form. Supports document/image/audio/video types, multiple sizes, loading state, and mask.

When to use

Use when displaying a single file in conversation or input scenarios, e.g. attachment lists or file previews in message bubbles.

Basic usage

Provide required name; optional props include byte, size, type, src. Cards use uniform width and height; long filenames are truncated with ellipsis; hover to see full name.

document.pdf

100.0 KB

report.xlsx

50.0 KB

very-long-filename-for-overflow-ellipsis-test.xlsx

200.0 KB

Basic usage

Card size

Set size to small, default, or large.

small.pdf

default.pdf

large.pdf

Card size

Image file

When type="image" and src is set, the card shows an image preview.

Image file

Image loading

Use the loading prop to show a loading state; the image stays visible but blurred with a spinner overlay, then transitions to clear when loading completes. The example below uses buttons to toggle between loading and complete.

Image loading

Using mask

Use mask to show overlay text (e.g. "Encrypted") on the card.

encrypted.pdf

100.0 KB

Encrypted

Using mask

Preset icon types

Use the icon prop with preset icons. Supported types: default, pdf, excel, word, ppt, image, markdown, zip, video, audio, java, javascript, python, txt. You can also omit icon and rely on extension-based inference.

default.pdf

100.0 KB

doc.pdf

100.0 KB

sheet.xlsx

50.0 KB

doc.docx

80.0 KB

slides.pptx

300.0 KB

image.png

50.0 KB

readme.md

2.0 KB

archive.zip

1000.0 KB

video.mp4

4.9 MB

audio.mp3

1000.0 KB

Main.java

4.0 KB

index.js

2.0 KB

main.py

1.0 KB

note.txt

512.0 B

Preset icon types

Audio / Video

Aligns with Ant Design X FileCard: uses browser native <audio> / <video>; when src is provided, media is directly playable. For 3+ items, use traversal (v-for); the delete button removes the item. Without src, the preset icon placeholder is shown. Use audioProps / videoProps to extend native playback.

audio-file.mp3

1.0 KB

video-file.mp4

1.0 KB

audio-2.mp3

2.0 KB

video-2.mp4

3.0 KB

Audio / Video

File list

Multiple file cards can be used with AiAttachments for list layout, overflow behavior, and delete. See AiAttachments.

API

FileCard Props

Property	Description	Type	Default
name	File name (required)	string	-
byte	File size in bytes	number	-
size	Card size	'small' | 'default' | 'large'	'default'
type	File type	'file' | 'image' | 'audio' | 'video' | string	'file'
src	Image or file URL	string	-
description	Description	string	-
loading	Loading state	boolean	false
mask	Mask content	string	-
icon	Preset icon	PresetFileIcons	'default'
imageProps	Image props (passed to img element)	Record<string, unknown>	{}
videoProps	Video props (passed to video element)	Record<string, unknown>	{}
audioProps	Audio props (passed to audio element)	Record<string, unknown>	{}
themeOverrides	Theme override variables	Record<string, unknown>	-

Slots

Slot	Description
default	Extension content (e.g. delete button, progress bar when used with AiAttachments)

PresetFileIcons

Preset icon types:

• default - Default file icon
• excel - Excel file icon
• image - Image file icon
• markdown - Markdown file icon
• pdf - PDF file icon
• ppt - PowerPoint file icon
• word - Word file icon
• zip - Archive file icon
• video - Video file icon
• audio - Audio file icon
• java - Java file icon
• javascript - JavaScript file icon
• python - Python file icon
• txt - Text file icon

FileCardListItem

List item interface extends FileCardProps with additional properties:

Property	Description	Type
uid	Unique identifier	string | number
url	File URL	string
thumbUrl	Thumbnail URL	string

Events

Event	Description
click	Fired when card is clicked (when not loading); for image type, clicking opens the preview