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

Attachment

ts

interface Attachment extends UploadFile {
  type?: 'image' | 'file' | 'other';
  previewText?: 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	-	-
icon	Custom Icon	React.ReactNode \| PresetIcons	-	1.6.0
type	Defines file type, when type is `image`, it will display in image preview mode	'file' \| 'image'	`file`	1.6.0

ts

type PresetIcons =
  | 'default'
  | 'excel'
  | 'image'
  | 'markdown'
  | 'pdf'
  | 'ppt'
  | 'word'
  | 'zip'
  | 'video'
  | 'audio';

Semantic DOM

Design Token