Attachments - Ant Design X

When To Use

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

Examples

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

tsx

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

Design Token