Attachments

Display the collection of attachment information.

Import

import{ Attachments }from"@ant-design/x";

Sourcecomponents/attachments

Docs

Edit this page Changelog

When To Use

The Attachments component is used in scenarios where a set of attachment information needs to be displayed.

Examples

Basic

Basic usage. You can use getDropContainer to support drag and drop upload.

Click or Drop files here

Support file type: image, video, audio, document, etc.

Custom Placeholder Node

Placeholder

Modify placeholder information.

Wrap

Scroll X

Scroll Y

Preview

Overflow

Controls the layout of attachments when they exceed the area.

Attachments

Upload files

Click or drag files to this area to upload

Combination

Work with Sender.Header to insert file into the conversation.

excel-file

.xlsx

109 KB

word-file

.docx

217 KB

image-file

.png

326 KB

pdf-file

.pdf

434 KB

ppt-file

.pptx

543 KB

video-file

.mp4

651 KB

audio-file

.mp3

760 KB

zip-file

.zip

868 KB

markdown-file

.md

Custom description here

Preview

File Card

A single file card, used in some display scenarios.

API

AttachmentsProps

For more properties, see Upload.

Property	Description	Type	Default	Version
classNames	Custom class names, see below	Record<string, string>	-	-
disabled	Whether to disable	boolean	false	-
getDropContainer	Config the area where files can be dropped	() => HTMLElement	-	-
items	Attachment list, same as Upload `fileList`	Attachment[]	-	-
overflow	Behavior when the file list overflows	'wrap' \| 'scrollX' \| 'scrollY'	-	-
placeholder	Placeholder information when there is no file	PlaceholderType \| ((type: 'inline' \| 'drop') => PlaceholderType)	-	-
rootClassName	Root node className	React.CSSProperties	-	-
rootStyle	Root node style object	React.CSSProperties	-	-
styles	Custom style object, see below	Record<string, React.CSSProperties>	-	-
imageProps	Image config, same as Image	ImageProps	-	-

interface PlaceholderType {
  icon?: React.ReactNode;
  title?: React.ReactNode;
  description?: React.ReactNode;
}

AttachmentsRef

Property	Description	Type	Version
nativeElement	Get the native node	HTMLElement	-
upload	Manually upload a file	(file: File) => void	-

Attachments.FileCard Props

Property	Description	Type	Default	Version
prefixCls	The prefix of the style class name	string	-	-
className	Style class name	string	-	-
style	Style Object	React.CSSProperties	-	-
item	Attachment, same as Upload `UploadFile`	Attachment	-	-
onRemove	A callback function, will be executed when removing file button is clicked, remove event will be prevented when the return value is false or a Promise which resolve(false) or reject	(item: Attachment) => boolean \| Promise	-	-
imageProps	Image config, same as Image	ImageProps	-	-

Semantic DOM

Upload File

Drag or click to upload file.

placeholder
Placeholder

Preview

list
List container
item
List item

Ant Design X

Attachments

When To Use

Examples

Click or Drop files here

Click or Drop files here

Upload files

API

AttachmentsProps

AttachmentsRef

Attachments.FileCard Props

Semantic DOM

Upload File

placeholder

list

item

Design Token