logoAnt Design X

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

Attachment

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

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
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
Changelog
loading

When To Use

The Prompts component is used to display a predefined set of questions or suggestion that are relevant to the current context.

Examples

API

AttachmentProps

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>--
interface PlaceholderType {
icon?: React.ReactNode;
title?: React.ReactNode;
description?: React.ReactNode;
}

AttachmentsRef

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

Semantic DOM

Design Token

Basic

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

codepen icon
External Link Icon
expand codeexpand code
Placeholder

Modify placeholder information.

codepen icon
External Link Icon
expand codeexpand code
Overflow

Modify placeholder information.

codepen icon
External Link Icon
expand codeexpand code
Combination

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

codepen icon
External Link Icon
expand codeexpand code
File Card

A single file card, used in some display scenarios.

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
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
Upload File
Drag or click to upload file.
  • placeholder
    Placeholder
preview
preview
preview
  • list
    List container
  • item
    List item