logoAnt Design X

DesignDevelopmentComponentsPlayground
  • Overview
  • Common
    • Bubble
    • Conversations
  • Wake
    • Welcome
    • Prompts
  • Express
    • Attachments
    • Sender
    • Suggestion
  • Confirm
    • ThoughtChain
  • Tools
    • useXAgent
    • useXChat
    • XStream
    • XRequest
    • XProvider

Attachments

Display the collection of attachment information.
Importimport { Attachments } from "@ant-design/x";
Sourcecomponents/attachments
Docs
Edit this page...

Resources

Ant Design
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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.

PropertyDescriptionTypeDefaultVersion
classNamesCustom class names, see belowRecord<string, string>--
disabledWhether to disablebooleanfalse-
getDropContainerConfig the area where files can be dropped() => HTMLElement--
itemsAttachment list, same as Upload fileListAttachment[]--
overflowBehavior when the file list overflows'wrap' | 'scrollX' | 'scrollY'--
placeholderPlaceholder information when there is no filePlaceholderType | ((type: 'inline' | 'drop') => PlaceholderType)--
rootClassNameRoot node classNameReact.CSSProperties--
rootStyleRoot node style objectReact.CSSProperties--
stylesCustom style object, see belowRecord<string, React.CSSProperties>--
imagePropsImage config, same as ImageImageProps--
tsx
interface PlaceholderType {
icon?: React.ReactNode;
title?: React.ReactNode;
description?: React.ReactNode;
}

AttachmentsRef

PropertyDescriptionTypeVersion
nativeElementGet the native nodeHTMLElement-
uploadManually upload a file(file: File) => void-

Attachments.FileCard Props

PropertyDescriptionTypeDefaultVersion
prefixClsThe prefix of the style class namestring--
classNameStyle class namestring--
styleStyle ObjectReact.CSSProperties--
itemAttachment, same as Upload UploadFileAttachment--
onRemoveA 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--
imagePropsImage config, same as ImageImageProps--

Semantic DOM

Design Token

Changelog
Basic

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Placeholder

Modify placeholder information.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Overflow

Controls the layout of attachments when they exceed the area.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Combination

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

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
File Card

A single file card, used in some display scenarios.

CodeSandbox Icon
codepen icon
External Link Icon
expand codeexpand code
Click or Drop files here
Support file type: image, video, audio, document, etc.
Custom Placeholder Node
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
preview
Preview
Click or Drop files here
Support file type: image, video, audio, document, etc.
Attachments
Upload files
Click or drag files to this area to upload
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
video-file
.mp4
651 KB
audio
audio-file
.mp3
760 KB
zip-file
.zip
868 KB
markdown-file
.md
Custom description here
preview
Preview
Upload File
Drag or click to upload file.
  • placeholder
    Placeholder
preview
Preview
preview
Preview
preview
Preview
  • list
    List container
  • item
    List item