import React from 'react'; import { InboxOutlined, PlusOutlined, UploadOutlined } from '@ant-design/icons'; import { Button, Space, Upload } from 'antd'; import type { UploadFile } from 'antd'; const { Dragger } = Upload; const fileList: UploadFile[] = [ { uid: '-1', name: 'image.png', status: 'done', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, { uid: '-2', name: 'image.png', status: 'done', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, { uid: '-xxx', percent: 50, name: 'image.png', status: 'uploading', url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', }, { uid: '-5', name: 'image.png', status: 'error', }, ]; const App: React.FC = () => { const uploadButton = ( <button style={{ border: 0, background: 'none' }} type="button"> <PlusOutlined /> <div style={{ marginTop: 8 }}>Upload</div> </button> ); return ( <Space direction="vertical"> <Upload disabled>Click Text to Upload</Upload> <Upload disabled> <Button icon={<UploadOutlined />}>Click to Upload</Button> </Upload> <Upload name="avatar" listType="picture-card" fileList={fileList} disabled> {uploadButton} </Upload> <Upload name="avatar" listType="picture-circle" fileList={fileList} disabled> {uploadButton} </Upload> <Dragger disabled> <p className="ant-upload-drag-icon"> <InboxOutlined /> </p> <p className="ant-upload-text">Click or drag file to this area to upload</p> <p className="ant-upload-hint"> Support for a single or bulk upload. Strictly prohibited from uploading company data or other banned files. </p> </Dragger> </Space> ); }; export default App;