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	string	-	-
styles	Custom style object, see below	Record<string, React.CSSProperties>	-	-
imageProps	Image config, same as antd 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          | -       |
| fileNativeElement | Get the file upload native node    | HTMLElement          | -    |
| upload        | Manually upload a file | (file: File) => void | -       |
| select        | Manually select files | (options: { accept?: string; multiple?: boolean; }) => void | -    |

## Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

## Design Token

<ComponentTokenTable component="Attachments"></ComponentTokenTable>

When To Use

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

Examples

API

Common props ref: Common props.

AttachmentsProps

Inherits antd Upload properties.

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	string	-	-
styles	Custom style object, see below	Record<string, React.CSSProperties>	-	-
imageProps	Image config, same as antd 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          | -       |
| fileNativeElement | Get the file upload native node    | HTMLElement          | -    |
| upload        | Manually upload a file | (file: File) => void | -       |
| select        | Manually select files | (options: { accept?: string; multiple?: boolean; }) => void | -    |

## Semantic DOM

<code src="./demo/_semantic.tsx" simplify="true"></code>

## Design Token

<ComponentTokenTable component="Attachments"></ComponentTokenTable>

Basic

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

Placeholder

Modify placeholder information.

Overflow

Controls the layout of attachments when they exceed the area.

Combination

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

Select Files by Type

Calling the ref.select method can open the file selection dialog to upload files by type. Setting multiple to true enables multi-selection, and setting maxCount can limit the maximum number of files that can be selected.

Basic

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

Placeholder

Modify placeholder information.

Overflow

Controls the layout of attachments when they exceed the area.

Combination

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

Select Files by Type

Calling the ref.select method can open the file selection dialog to upload files by type. Setting multiple to true enables multi-selection, and setting maxCount can limit the maximum number of files that can be selected.

Click or Drop files here

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

Custom Placeholder Node

Wrap

Scroll X

Scroll Y

Attachments

Upload files

Click or drag files to this area to upload