{"componentChunkName":"component---src-templates-post-template-js","path":"/en-US/input/upload","result":{"data":{"current":{"frontmatter":{"title":"Upload","order":53,"brief":"File selection upload","icon":"doc-upload"},"fields":{"type":"input"},"tableOfContents":{"items":[{"url":"#demos","title":"Demos","items":[{"url":"#how-to-import","title":"How to import"},{"url":"#basic-usage","title":"Basic usage"},{"url":"#file-name-too-long-ellipsis","title":"File name too long ellipsis"},{"url":"#add-prompt-text","title":"Add prompt text"},{"url":"#click-on-the-avatar-to-trigger-upload","title":"Click on the avatar to trigger upload"},{"url":"#custom-upload-attributes","title":"Custom upload attributes"},{"url":"#upload-file-type","title":"Upload file type"},{"url":"#upload-folder","title":"Upload folder"},{"url":"#select-multiple-files-at-once","title":"Select multiple files at once"},{"url":"#limit-the-total-number-of-files","title":"Limit the total number of files"},{"url":"#limit-upload-file-size","title":"Limit upload file size"},{"url":"#custom-list-operation-area","title":"Custom list operation area"},{"url":"#custom-file-list-title","title":"Custom file list title","items":[{"url":"#string-or-reactnode-form","title":"String or ReactNode form"},{"url":"#function-form","title":"Function form"}]},{"url":"#custom-preview-logic","title":"Custom preview logic"},{"url":"#default-file-list","title":"Default file list"},{"url":"#controlled-component","title":"Controlled component"},{"url":"#photo-wall","title":"Photo Wall"},{"url":"#photo-wall-with-preview","title":"Photo Wall With Preview"},{"url":"#photo-wall-widthheight","title":"Photo Wall Width/Height"},{"url":"#disabled","title":"Disabled"},{"url":"#manually-trigger-upload","title":"Manually trigger upload"},{"url":"#drag-and-drop-upload","title":"Drag and drop upload"},{"url":"#custom-check-before-upload","title":"Custom check before upload"},{"url":"#update-file-information-after-upload","title":"Update file information after upload"},{"url":"#custom-request","title":"Custom request"}]},{"url":"#api-reference","title":"API Reference"},{"url":"#accessibility","title":"Accessibility","items":[{"url":"#aria","title":"ARIA"}]},{"url":"#interfaces","title":"Interfaces","items":[{"url":"#fileitem-interface","title":"FileItem Interface"},{"url":"#renderfilelisttitleprops-interface","title":"RenderFileListTitleProps Interface"}]},{"url":"#methods","title":"Methods"},{"url":"#content-guidelines","title":"Content Guidelines"},{"url":"#design-tokens","title":"Design Tokens"},{"url":"#faq","title":"FAQ"}]},"body":"var _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var s = Object.getOwnPropertySymbols(e); for (r = 0; r < s.length; r++) o = s[r], t.includes(o) || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.includes(n)) continue; t[n] = r[n]; } return t; }\n/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"localeCode\": \"en-US\",\n  \"order\": 53,\n  \"category\": \"Input\",\n  \"title\": \"Upload\",\n  \"icon\": \"doc-upload\",\n  \"width\": \"50%\",\n  \"brief\": \"File selection upload\"\n};\nvar makeShortcode = function makeShortcode(name) {\n  return function MDXDefaultShortcode(props) {\n    console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n    return mdx(\"div\", props);\n  };\n};\nvar Notice = makeShortcode(\"Notice\");\nvar DesignToken = makeShortcode(\"DesignToken\");\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Demos\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"How to import\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"import\",\n    \"import\": true\n  }, \"import { Upload } from '@douyinfe/semi-ui';\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Basic usage\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The most basic usage is to place a Button in children, click on the children content (the placed Button) to activate the file selection box, and the upload will start automatically after the selection is completed\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => (\\n    <Upload action=\\\"//semi.design/api/upload\\\">\\n        <Button icon={<IconUpload />} theme=\\\"light\\\">\\n            Click upload\\n        </Button>\\n    </Upload>\\n);\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"File name too long ellipsis\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Customize the file name tooltip using the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showTooltip\"), \" property\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When the type is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"boolean\"), \", control whether to show the tooltip\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const action = 'https://api.semi.design/upload';\\n    const button = (\\n        <Button icon={<IconUpload />} theme=\\\"light\\\">\\n            Click upload\\n        </Button>\\n    );\\n    return (\\n        <>\\n            <Upload action={action} showTooltip={false}>\\n                {button}\\n            </Upload>\\n        </>\\n    );\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When the type is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"object\"), \", you can customize the tooltip style.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button, Tooltip } from '@douyinfe/semi-ui';\\n\\n() => {\\n    const action = 'https://api.semi.design/upload';\\n    const button = (\\n        <Button icon={<IconUpload />} theme=\\\"light\\\">\\n            Click upload\\n        </Button>\\n    );\\n    return (\\n        <>\\n            <Upload action={action} showTooltip={{ \\n                renderTooltip: (content, children) => {\\n                    return <Tooltip content={content} position=\\\"bottom\\\">{children}</Tooltip>\\n                } \\n            }}>\\n                {button}\\n            </Upload>\\n        </>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Add prompt text\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set a custom prompt text through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"prompt\"), \" slot\\nSet the slot position by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"promptPosition\"), \", optional \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"bottom\"), \", the default is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"right\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const action = '//semi.design/api/upload';\\n    const getPrompt = (pos, isListType) => {\\n        let basicStyle = { display: 'flex', alignItems: 'center', color: 'grey', height: isListType ? '100%' : 32 };\\n        let marginStyle = {\\n            left: { marginRight: 10 },\\n            right: { marginLeft: 10 },\\n        };\\n        let style = { ...basicStyle, ...marginStyle[pos] };\\n\\n        return <div style={style}>Please upload qualification certification materials</div>;\\n    };\\n    const button = (\\n        <Button icon={<IconUpload />} theme=\\\"light\\\">\\n            Click upload\\n        </Button>\\n    );\\n    const positions = ['right', 'left', 'bottom'];\\n    return (\\n        <>\\n            {positions.map((pos, index) => (\\n                <>\\n                    {index ? (\\n                        <div\\n                            style={{ marginBottom: 12, marginTop: 12, borderBottom: '1px solid var(--semi-color-border)' }}\\n                        ></div>\\n                    ) : null}\\n                    <Upload action={action} prompt={getPrompt(pos)} promptPosition={pos}>\\n                        {button}\\n                    </Upload>\\n                </>\\n            ))}\\n        </>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When listType is picture, the reference object at promptPosition is the whole picture wall list\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconPlus } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const action = '//semi.design/api/upload';\\n    const getPrompt = (pos, isListType) => {\\n        let basicStyle = { display: 'flex', alignItems: 'center', color: 'grey', height: isListType ? '100%' : 32 };\\n        let marginStyle = {\\n            left: { marginRight: 10 },\\n            right: { marginLeft: 10 },\\n        };\\n        let style = { ...basicStyle, ...marginStyle[pos] };\\n\\n        return <div style={style}>Please upload certification materials</div>;\\n    };\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: '1.jpeg',\\n            status: 'success',\\n            size: '130kb',\\n            url:\\n                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n        },\\n        {\\n            uid: '2',\\n            name: '2.jpeg',\\n            size: '222kb',\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        }\\n    ];\\n    const positions = ['right', 'bottom'];\\n    return (\\n        <>\\n            {positions.map((pos, index) => (\\n                <>\\n                    {index ? (\\n                        <div\\n                            style={{ marginBottom: 12, marginTop: 12, borderBottom: '1px solid var(--semi-color-border)' }}\\n                        ></div>\\n                    ) : null}\\n                    <Upload\\n                        action={action}\\n                        prompt={getPrompt(pos, true)}\\n                        promptPosition={pos}\\n                        listType=\\\"picture\\\"\\n                        defaultFileList={defaultFileList}\\n                    >\\n                        <IconPlus size=\\\"extra-large\\\" />\\n                    </Upload>\\n                </>\\n            ))}\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Click on the avatar to trigger upload\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Avatar, Toast } from '@douyinfe/semi-ui';\\nimport { IconCamera } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const [url, setUrl] = useState('https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png');\\n    const onSuccess = (response, file) => {\\n        Toast.success('Avatar updated successfully');\\n        // const url = response.url;\\n        setUrl('https://sf6-cdn-tos.douyinstatic.com/obj/ttfe/ies/semi/ttmoment.jpeg');\\n    };\\n\\n    const style = {\\n        backgroundColor: 'var(--semi-color-overlay-bg)',\\n        height: '100%',\\n        width: '100%',\\n        display: 'flex',\\n        alignItems: 'center',\\n        justifyContent: 'center',\\n        color: 'var(--semi-color-white)',\\n    };\\n    \\n    const hoverMask = (<div style={style}>\\n        <IconCamera />\\n    </div>);\\n\\n    const api = '//semi.design/api/upload';\\n    let imageOnly = 'image/*';\\n\\n    return (\\n        <Upload\\n            className=\\\"avatar-upload\\\"\\n            action={api}\\n            onSuccess={onSuccess}\\n            accept={imageOnly}\\n            showUploadList={false}\\n            onError={() => Toast.error('upload failed')}\\n        >\\n            <Avatar src={url} style={{ margin: 4 }} hoverMask={hoverMask} />\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \".avatar-upload .semi-upload-add {\\n    border-radius: 50%; // Make sure that only the circle is clicked on the hot zone\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom upload attributes\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Custom upload attributes can be added by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"data\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"headers\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    let data = {\\n        role: 'ies',\\n        time: new Date().getTime(),\\n    };\\n    let headers = {\\n        'x-tt-semi': 'semi-upload',\\n    };\\n    return (\\n        <Upload action={action} data={data} headers={headers}>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Upload file type\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The type of files uploaded can be restricted through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accept\"), \" attribute (the native \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"html\"), \" attribute of \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \").\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accept\"), \" supports the following two types of strings:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"A collection of file extensions (recommended), such as .jpg, .png, etc.;\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"MIME types collection of file types, please refer to \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types\"\n  }, \"MDN document\"))), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"For example, only allowing users to upload PNG and PDF files, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accept\"), \" can be written like this: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accept ='.pdf,.png'\"), \" or \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"accept ='application/pdf,image/png'\"), \" (the MIME type of PNG and PDF Connect through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \",\"), \").\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"Notes\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"Upload will intercept files that do not meet the accept format internally. When files that do not meet the format requirements are intercepted, the onAcceptInvalid method (provided by v1.24) will be triggered;\"), mdx(\"div\", null, \"accept uses the suffix to avoid the incompatibility between file.type and MIME due to different browsers or operating systems. \")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    let imageOnly = 'image/*';\\n    let videoOnly = 'video/*';\\n    let fileLimit = '.pdf,.png,.jpeg';\\n    return (\\n        <>\\n            <Upload action={action} accept={imageOnly} style={{ marginBottom: 12 }}>\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Upload image\\n                </Button>\\n            </Upload>\\n            <Upload action={action} accept={videoOnly} style={{ marginBottom: 12 }}>\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Upload video\\n                </Button>\\n            </Upload>\\n            <Upload action={action} accept={fileLimit}>\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Upload PDF, PNG, JPEG\\n                </Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Upload folder\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By passing in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"directory\"), \" as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\"), \", all files in the folder can be uploaded\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    return (\\n        <>\\n            <Upload action={action} directory>\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Upload folder\\n                </Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Select multiple files at once\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can select multiple files to upload at the same time by setting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"multiple\"), \" attribute.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    return (\\n        <Upload action={action} multiple>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Limit the total number of files\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can limit the maximum number of files that can be uploaded by setting the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"limit\"), \" property\\nWhen \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"limit\"), \" is 1, always replace the current one with the latest upload, and will not trigger the onExceed callback\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"dir=\\\"column\\\" live=true width=48%\",\n    \"dir\": \"\\\"column\\\"\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://semi.design/api/upload';\\n    let limit = 1;\\n    let onChange = props => {\\n        console.log(props.fileList);\\n    };\\n    return (\\n        <Upload\\n            action={action}\\n            limit={limit}\\n            onChange={onChange}\\n        >\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click to upload (up to {limit} items)\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"dir=\\\"column\\\" live=true width=48%\",\n    \"dir\": \"\\\"column\\\"\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://semi.design/api/upload';\\n    let [disabled, setDisabled] = useState(false);\\n    let limit = 2;\\n    let onChange = props => {\\n        let length = props.fileList.length;\\n        if (length === limit) {\\n            setDisabled(true);\\n        } else {\\n            setDisabled(false);\\n        }\\n    };\\n    return (\\n        <Upload\\n            action={action}\\n            limit={limit}\\n            onExceed={() => Toast.warning(`Up to ${limit} files are allowed to be uploaded`)}\\n            onChange={onChange}\\n        >\\n            <Button icon={<IconUpload />} theme=\\\"light\\\" disabled={disabled}>\\n                Click to upload (up to {limit} items)\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In the photo wall mode, when the number of uploaded files is equal to the limit, the upload entry will be automatically hidden\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconPlus } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.jpeg',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        },\\n        {\\n            uid: '2',\\n            name: 'dyBag2.jpeg',\\n            status: 'success',\\n            size: '222KB',\\n            preview: true,\\n            fileInstance: new File([new ArrayBuffer(2048)], 'abc.jpeg', { type: 'image/png' }),\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        },\\n    ];\\n    return (\\n        <Upload\\n            action={action}\\n            limit={2}\\n            listType=\\\"picture\\\"\\n            accept=\\\"image/*\\\"\\n            defaultFileList={defaultFileList}\\n            onExceed={() => Toast.warning('Only allow up to 2 files to be uploaded')}\\n        >\\n            <IconPlus size=\\\"extra-large\\\" />\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Limit upload file size\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The upload file size limit can be customized through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"maxSize\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"minSize\"), \" properties, and the callback when the limit is exceeded can be set by setting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onSizeError\"), \".\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n\\n    return (\\n        <>\\n            <Upload\\n                action={action}\\n                maxSize={1024}\\n                minSize={200}\\n                onSizeError={(file, fileList) => Toast.error(`${file.name} size invalid`)}\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Click to upload (minimum 200KB, maximum 1MB)\\n                </Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom list operation area\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"listType\"), \" is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"list\"), \", you can customize the list operation area by passing in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFileOperation\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload, IconDownload, IconEyeOpened, IconDelete } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.jpeg',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        }\\n    ];\\n    const renderFileOperation = (fileItem) => (\\n        <div style={{ display: 'flex', columnGap: 8, padding: '0 8px' }}>\\n            <Button icon={<IconEyeOpened></IconEyeOpened>} type=\\\"tertiary\\\" theme=\\\"borderless\\\" size=\\\"small\\\"></Button>\\n            <Button icon={<IconDownload></IconDownload>} type=\\\"tertiary\\\" theme=\\\"borderless\\\" size=\\\"small\\\"></Button>\\n            <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type=\\\"tertiary\\\" theme=\\\"borderless\\\" size=\\\"small\\\"></Button>\\n        </div>\\n    );\\n    return (\\n        <Upload action={action} defaultFileList={defaultFileList} itemStyle={{ width: 300 }} renderFileOperation={renderFileOperation}>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">Upload</Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom file list title\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"listType\"), \" is \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"list\"), \", you can customize the title area at the top of the file list through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fileListTitle\"), \". Two forms are supported:\"), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"String or ReactNode form\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When passing a string or ReactNode, only the title text is replaced, and the clear button retains its default style:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'document.pdf',\\n            status: 'success',\\n            size: '130KB',\\n        },\\n        {\\n            uid: '2',\\n            name: 'report.xlsx',\\n            status: 'success',\\n            size: '222KB',\\n        },\\n    ];\\n\\n    return (\\n        <>\\n            <Upload \\n                action={action} \\n                defaultFileList={defaultFileList} \\n                fileListTitle=\\\"Uploaded files\\\"\\n                style={{ marginBottom: 20 }}\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">Custom title text</Button>\\n            </Upload>\\n            <Upload \\n                action={action} \\n                defaultFileList={defaultFileList} \\n                fileListTitle={<span style={{ color: 'var(--semi-color-primary)', fontWeight: 600 }}>\\uD83D\\uDCC1 Important files</span>}\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">Title with styles</Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h4\", {\n    parentName: \"section\"\n  }, \"Function form\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When passing a function, you can fully customize the title area, including the clear button. The function receives the following parameters:\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fileList\"), \": Current file list\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"onClear\"), \": Callback function to clear files\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"clearText\"), \": Default text for the clear button (based on current locale)\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload, IconClose } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'document.pdf',\\n            status: 'success',\\n            size: '130KB',\\n        },\\n        {\\n            uid: '2',\\n            name: 'report.xlsx',\\n            status: 'success',\\n            size: '222KB',\\n        },\\n    ];\\n\\n    return (\\n        <>\\n            <Upload \\n                action={action} \\n                defaultFileList={defaultFileList} \\n                style={{ marginBottom: 20 }}\\n                fileListTitle={({ fileList, onClear, clearText }) => (\\n                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>\\n                        <span style={{ color: 'var(--semi-color-primary)' }}>\\n                            \\uD83D\\uDCC2 {fileList.length} files total\\n                        </span>\\n                        <Button \\n                            size=\\\"small\\\" \\n                            type=\\\"danger\\\" \\n                            icon={<IconClose />}\\n                            onClick={onClear}\\n                        >\\n                            {clearText}\\n                        </Button>\\n                    </div>\\n                )}\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">Custom clear button style</Button>\\n            </Upload>\\n            <Upload \\n                action={action} \\n                defaultFileList={defaultFileList} \\n                fileListTitle={({ fileList, onClear }) => (\\n                    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', width: '100%' }}>\\n                        <span>\\n                            Selected <strong style={{ color: 'var(--semi-color-danger)' }}>{fileList.length}</strong> files\\n                        </span>\\n                        <span \\n                            onClick={onClear}\\n                            style={{ \\n                                cursor: 'pointer', \\n                                color: 'var(--semi-color-link)',\\n                                fontSize: 12\\n                            }}\\n                        >\\n                            Remove all\\n                        </span>\\n                    </div>\\n                )}\\n            >\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">Fully customized title area</Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom preview logic\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"listType\"), \" is list, the preview logic can be implemented by passing in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"previewFile\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"For example, when you don't need thumbnail preview for image types, you can constantly return a \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<IconFile />\"), \" in previewFile.\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"If you want to enlarge and preview the image when clicked, you can use the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"Image\"), \" component in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"previewFile\"), \".\", mdx(\"br\", {\n    parentName: \"p\"\n  }), \"\\n\", \"Or if you want to use an additional operation area to achieve enlarged preview when clicked, you can also combine \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFileOperation\"), \" to place some custom elements such as Icon to achieve enlarged preview when clicked.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button, Image } from '@douyinfe/semi-ui';\\nimport { IconUpload, IconFile } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.jpeg',\\n            status: 'success',\\n            size: '130KB',\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        },\\n        {\\n            uid: '2',\\n            name: 'dyBag2.png',\\n            status: 'success',\\n            size: '130KB',\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        },\\n    ];\\n    return (\\n        <Upload\\n            defaultFileList={defaultFileList}\\n            action={action}\\n            previewFile={file => file.uid === '1' ? <IconFile size=\\\"large\\\" /> : <Image src={file.url} />}\\n        >\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The following is an example of combining \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderFileOperation\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"ImagePreview\"), \". In this example, clicking the first Icon on the right can enlarge the image for preview.\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true\",\n    \"live\": \"true\"\n  }, \"import React, { useStae } from 'react';\\nimport { Upload, Button, ImagePreview } from '@douyinfe/semi-ui';\\nimport { IconUpload, IconDownload, IconEyeOpened, IconDelete, IconExpand } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n    const [visible, setVisible] = useState(false);\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        }\\n    ];\\n    const renderFileOperation = (fileItem) => (\\n        <div style={{ display: 'flex', columnGap: 8, padding: '0 8px' }}>\\n            <Button\\n                icon={<IconExpand></IconExpand>}\\n                type=\\\"tertiary\\\"\\n                theme=\\\"borderless\\\"\\n                size=\\\"small\\\"\\n                onClick={()=> setVisible(true)}\\n            >\\n            </Button>\\n            <Button icon={<IconDownload></IconDownload>} type=\\\"tertiary\\\" theme=\\\"borderless\\\" size=\\\"small\\\"></Button>\\n            <Button onClick={e=>fileItem.onRemove()} icon={<IconDelete></IconDelete>} type=\\\"tertiary\\\" theme=\\\"borderless\\\" size=\\\"small\\\"></Button>\\n            <ImagePreview\\n                src={fileItem.url}\\n                visible={visible}\\n                onVisibleChange={setVisible}\\n            />\\n        </div>\\n    );\\n    return <Upload action={action} defaultFileList={defaultFileList} itemStyle={{ width: 300 }} renderFileOperation={renderFileOperation}>\\n        <Button icon={<IconUpload />} theme=\\\"light\\\">Click upload</Button>\\n    </Upload>;\\n};\\n\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Default file list\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The uploaded files can be displayed through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultFileList\"), \". When you need to preview the thumbnail of the default file, you can set the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"preview\"), \" attribute of the corresponding \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"item\"), \" in \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"defaultFileList\"), \" to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"true\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.jpeg',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/edit-bag.jpeg',\\n        },\\n        {\\n            uid: '2',\\n            name: 'abc.jpeg',\\n            status: 'uploadFail',\\n            size: '222KB',\\n            preview: true,\\n            fileInstance: new File([new ArrayBuffer(2048)], 'abc.jpeg', { type: 'image/png' }),\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        },\\n    ];\\n\\n    return (\\n        <>\\n            <Upload action={action} defaultFileList={defaultFileList}>\\n                <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                    Click upload\\n                </Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Controlled component\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fileList\"), \" is passed in, it is used as a controlled component. Need to listen to the onChange callback, and pass the fileList back to Upload (note that a new array object needs to be passed in)\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const initList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.jpeg',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        },\\n        {\\n            uid: '2',\\n            name: 'dy.jpeg',\\n            status: 'uploading',\\n            size: '222KB',\\n            percent: 50,\\n            preview: true,\\n            fileInstance: new File([new ArrayBuffer(2048)], 'dy2.jpeg', { type: 'image/jpeg' }),\\n            url:\\n                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n        },\\n    ];\\n\\n    const [list, updateList] = useState(initList);\\n\\n    const onChange = ({ fileList, currentFile, event }) => {\\n        console.log('onChange');\\n        console.log(fileList);\\n        console.log(currentFile);\\n        let newFileList = [...fileList]; // spread to get new array\\n        updateList(newFileList);\\n    };\\n\\n    return (\\n        <Upload\\n            action=\\\"//semi.design/api/upload\\\"\\n            onChange={onChange}\\n            fileList={list}\\n            showRetry={false}\\n        >\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Photo Wall\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"listType ='picture'\"), \", users can upload pictures and display thumbnails in the list\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconPlus } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dy.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n        },\\n    ];\\n    return (\\n        <>\\n            <Upload action={action} listType=\\\"picture\\\" accept=\\\"image/*\\\" multiple defaultFileList={defaultFileList}>\\n                <IconPlus size=\\\"extra-large\\\" />\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showPicInfo\"), \", you can view the basic information of the picture\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconPlus } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = '//semi.design/api/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: '1.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        },\\n        {\\n            uid: '2',\\n            name: '2.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        },\\n    ];\\n    return (\\n        <>\\n            <Upload action={action} listType=\\\"picture\\\" showPicInfo accept=\\\"image/*\\\" multiple defaultFileList={defaultFileList}>\\n                <IconPlus size=\\\"extra-large\\\" />\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can customize the preview icon through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderPicPreviewIcon\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onPreviewClick\"), \", when the replacement icon \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"showReplace\"), \" is displayed, the preview icon will no longer be displayed. \", mdx(\"br\", null), \"\\nWhen you need to customize the preview/replacement function, you need to turn off the replacement function and use \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"renderPicPreviewIcon\"), \" to listen for icon click events. \", mdx(\"br\", null), \"\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"onPreviewClick\"), \" listens for the click event of the single image container\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dy.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url:\\n                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n        },\\n    ];\\n    const handlePreview = (file) => {\\n        const feature = \\\"width=300,height=300\\\";\\n        window.open(file.url, 'imagePreview', feature);\\n    };\\n    return (\\n        <>\\n            <Upload\\n                action={action}\\n                listType=\\\"picture\\\"\\n                showPicInfo\\n                accept=\\\"image/*\\\"\\n                multiple\\n                defaultFileList={defaultFileList}\\n                onPreviewClick={handlePreview}\\n                renderPicPreviewIcon={()=><IconEyeOpened style={{ color: 'var(--semi-color-white)', fontSize: 24 }} />}\\n            >\\n                <IconPlus size=\\\"extra-large\\\" />\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Set \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"hotSpotLocation\"), \" to customize the order of click hotspots, the default is at the end of the photo wall list\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Select, RadioGroup, Radio } from '@douyinfe/semi-ui';\\nimport { IconPlus, IconEyeOpened } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dy.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url:\\n                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n        },\\n    ];\\n    const handlePreview = (file) => {\\n        const feature = \\\"width=300,height=300\\\";\\n        window.open(file.url, 'imagePreview', feature);\\n    };\\n    const [hotSpotLocation, setLocation] = useState('end');\\n    return (\\n        <>\\n            <RadioGroup\\n                value={hotSpotLocation}\\n                type='button'\\n                onChange={e => setLocation(e.target.value)}>\\n                <Radio value='start'>start</Radio>\\n                <Radio value='end'>end</Radio>\\n            </RadioGroup>\\n            <hr />\\n            <Upload\\n                action={action}\\n                listType=\\\"picture\\\"\\n                showPicInfo\\n                accept=\\\"image/*\\\"\\n                multiple\\n                hotSpotLocation={hotSpotLocation}\\n                defaultFileList={defaultFileList}\\n                onPreviewClick={handlePreview}\\n            >\\n                <IconPlus size=\\\"extra-large\\\" />\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Photo Wall With Preview\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"With the Image component, through the renderThumbnail API, you can click on the image to enlarge the preview\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Image } from '@douyinfe/semi-ui';\\nimport { IconPlus } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'music.png',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url:\\n                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        }\\n    ];\\n    return (\\n        <>\\n            <Upload\\n                action={action}\\n                listType=\\\"picture\\\"\\n                accept=\\\"image/*\\\"\\n                multiple\\n                defaultFileList={defaultFileList}\\n                renderThumbnail={(file) => (<Image src={file.url} />)}\\n            >\\n                <IconPlus size=\\\"extra-large\\\" />\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Photo Wall Width/Height\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"By setting picHeight, picWidth (provided after v2.42), the width and height of picture wall elements can be uniformly set\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true dir=\\\"column\\\"\",\n    \"live\": \"true\",\n    \"dir\": \"\\\"column\\\"\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconPlus } from '@douyinfe/semi-icons';\\n\\n() => {\\n    let action = 'https://api.semi.design/upload';\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'image-1.jpg',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url:\\n                'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/abstract.jpg',\\n        }\\n    ];\\n    return (\\n        <>\\n            <Upload\\n                action={action}\\n                listType=\\\"picture\\\"\\n                accept=\\\"image/*\\\"\\n                multiple\\n                defaultFileList={defaultFileList}\\n                picHeight={110}\\n                picWidth={200}\\n            >\\n                <IconPlus size=\\\"extra-large\\\" style={{ margin: 4 }} />\\n                Click to add picture\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Disabled\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const defaultFileList = [\\n        {\\n            uid: '1',\\n            name: 'dyBag.jpeg',\\n            status: 'success',\\n            size: '130KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png',\\n        },\\n        {\\n            uid: '2',\\n            name: 'abc.jpeg',\\n            status: 'validateFail',\\n            size: '222KB',\\n            preview: true,\\n            url: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/Resso.png',\\n        },\\n    ];\\n    let action = '//semi.design/api/upload';\\n    return (\\n        <>\\n            <Upload action={action} disabled defaultFileList={defaultFileList}>\\n                <Button icon={<IconUpload />} theme=\\\"light\\\" disabled>\\n                    Click upload\\n                </Button>\\n            </Upload>\\n        </>\\n    );\\n};\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Manually trigger upload\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"uploadTrigger='custom'\"), \", the upload will not be triggered automatically after the file is selected. Need to manually call the upload method on the ref to trigger\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React, { useRef } from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload, IconPlus } from '@douyinfe/semi-icons';\\n\\nfunction ManulUploadDemo() {\\n    const uploadRef = useRef();\\n    const manulUpload = () => {\\n        uploadRef.current && uploadRef.current.upload();\\n    };\\n\\n    let action = '//semi.design/api/upload';\\n    return (\\n        <div>\\n            <Upload\\n                accept=\\\"image/gif, image/png, image/jpeg, image/bmp, image/webp\\\"\\n                action={action}\\n                uploadTrigger=\\\"custom\\\"\\n                ref={uploadRef}\\n                onSuccess={(...v) => console.log(...v)}\\n                onError={(...v) => console.log(...v)}\\n            >\\n                <Button icon={<IconPlus />} theme=\\\"light\\\" style={{ marginRight: 8 }}>\\n                    Select a document\\n                </Button>\\n            </Upload>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\" onClick={manulUpload}>\\n                Start upload\\n            </Button>\\n        </div>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Drag and drop upload\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"draggable='true'\"), \", you can use the drag and drop function\"), mdx(Notice, {\n    type: \"primary\",\n    title: \"Notice\",\n    mdxType: \"Notice\"\n  }, mdx(\"div\", null, \"When the directory is true, because the browser automatically imposes restrictions, it is not allowed to select a single file when clicking upload. When dragging, we think it is more reasonable to allow folders and files to be dragged, so no additional interception processing is performed.\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\n\\n() => (\\n    <Upload\\n        action=\\\"//semi.design/api/upload\\\"\\n        draggable={true}\\n        dragMainText=\\\"Click to upload the file or drag and drop the file here\\\"\\n        dragSubText=\\\"Support any type of file\\\"\\n    ></Upload>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can quickly set the content of the drag area through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dragIcon\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dragMainText\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"dragSubText\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconBolt } from '@douyinfe/semi-icons';\\n\\n() => <Upload\\n    action=\\\"//semi.design/api/upload\\\"\\n    dragIcon={<IconBolt />}\\n    draggable={true}\\n    accept=\\\"application/pdf,.jpeg\\\"\\n    dragMainText={'Click to upload the file or drag and drop the file here'}\\n    dragSubText=\\\"Only supports jpeg, pdf\\\"\\n    style={{ marginTop: 10 }}\\n></Upload>;\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"You can also pass in ReactNode through \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"children\"), \" to completely customize the display of the drag area\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload } from '@douyinfe/semi-ui';\\nimport { IconBolt } from '@douyinfe/semi-icons';\\n\\n() => (<Upload\\n    action=\\\"//semi.design/api/upload\\\"\\n    dragIcon={<IconBolt />}\\n    draggable={true}\\n    accept=\\\"application/pdf,.jpeg\\\"\\n    style={{ marginTop: 10 }}\\n>\\n    <div className=\\\"components-upload-demo-drag-area\\\">\\n        <img\\n            src=\\\"https://lf3-static.bytednsdoc.com/obj/eden-cn/ptlz_zlp/ljhwZthlaukjlkulzlp/root-web-sites/dy.png\\\"\\n            height=\\\"96\\\"\\n            alt=\\\"upload\\\"\\n            style={{ borderRadius: 4 }}\\n        />\\n        <div\\n            style={{\\n                fontSize: 14,\\n                marginTop: 8,\\n                flexBasis: '100%',\\n                textAlign: 'center',\\n                color: 'var(--semi-color-tertiary)',\\n            }}\\n        >\\n            Wow, you can really dance.\\n        </div>\\n    </div>\\n</Upload>\\n);\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The scss style is as follows\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-scss\"\n  }, \".components-upload-demo-drag-area {\\n    border-radius: var(--semi-border-radius-small);\\n    border: 2px dashed var(--semi-color-border);\\n    width: 100%;\\n    padding: 12px;\\n    background-color: var(--semi-color-tertiary-light-default);\\n    display: flex;\\n    cursor: pointer;\\n    flex-wrap: wrap;\\n    justify-content: center;\\n    &:hover {\\n        background-color: var(--semi-color-primary-light-default);\\n        border-color: var(--semi-color-primary);\\n    }\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom check before upload\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The file status can be updated through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"beforeUpload\"), \" hook, which is to verify the file after selecting the file before uploading online, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"({ file: FileItem, fileList: Array<FileItem> }) => beforeUploadResult | Promise | boolean\"), \" During synchronization verification, a boolean (true means the verification passed, false means the verification failed, and the verification failure will prevent the file from uploading online) or an Object object. The specific structure is as follows\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// beforeUploadResult:\\n{\\n     fileInstance?: File,\\n     status?:'success' |'uploadFail' |'validateFail' |'validating' |'uploading' |'wait',\\n     validateMessage?: React.ReactNode | string, // file validation information\\n     shouldUpload: boolean, // Whether to upload. The default is true, if it is false, the fileItem will only be displayed in the list, and the upload operation will not be triggered\\n     autoRemove: boolean, // Whether to remove the file from the fileList, the default is false\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React, { useRef } from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\nfunction ValidateDemo() {\\n    const countRef = useRef(0);\\n\\n    const transformFile = (fileInstance) => {\\n        if (countRef.current === 0) {\\n            return new File([fileInstance], 'newFileName', { type: 'image/png' });\\n        }\\n        return fileInstance;\\n    };\\n\\n    const beforeUpload = ({ file, fileList }) => {\\n        let result;\\n        if (countRef.current > 0) {\\n            result = {\\n                autoRemove: false,\\n                fileInstance: file.fileInstance,\\n                shouldUpload: true,\\n            };\\n        } else {\\n            result = {\\n                autoRemove: false,\\n                fileInstance: file.fileInstance,\\n                status: 'validateFail',\\n                shouldUpload: false,\\n            };\\n        }\\n        countRef.current = countRef.current + 1;\\n        return result;\\n    };\\n\\n    return (\\n        <Upload action=\\\"//semi.design/api/upload\\\" transformFile={transformFile} beforeUpload={beforeUpload}>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload (synchronize check before upload)\\n            </Button>\\n        </Upload>\\n    );\\n}\\n\")), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"In the case of asynchronous verification, a Promise must be returned. Promise resolve means that the verification is passed, and reject means that the verification fails and the upload will not be triggered.\\nObject can be passed in when resolve/reject (the structure is the same as beforeUploadResult)\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React, { useRef } from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\nfunction AsyncBeforeUploadDemo() {\\n    const countRef = useRef(0);\\n    const beforeUpload = ({ file, fileList }) => {\\n        return new Promise((resolve, reject) => {\\n            if (countRef.current > 1) {\\n                const result = {\\n                    autoRemove: false,\\n                    shouldUpload: true,\\n                };\\n                countRef.current = countRef.current + 1;\\n                resolve(result);\\n            } else {\\n                const result = {\\n                    autoRemove: false,\\n                    fileInstance: file.fileInstance,\\n                    status: 'validateFail',\\n                    shouldUpload: false,\\n                    validateMessage: `${countRef.current + 1} is doomed to fail`,\\n                };\\n                countRef.current = countRef.current + 1;\\n                reject(result);\\n            }\\n        });\\n    };\\n\\n    return (\\n        <Upload action=\\\"//semi.design/api/upload\\\" beforeUpload={beforeUpload}>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload (asynchronous verification before upload)\\n            </Button>\\n        </Upload>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Update file information after upload\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The file status, verification information, and file name can be updated through the \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"afterUpload\"), \" hook.\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"({ response: any, file: FileItem, fileList: Array<FileItem> }) => afterUploadResult\"), \"\\nafterUpload is triggered when the upload is completed (xhr.onload) and no error occurs, it needs to return an Object object (asynchronous return is not supported), the specific structure is as follows\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"// afterUploadResult:\\n{\\n    status?:'success' |'uploadFail' |'validateFail' |'validating' |'uploading' |'wait',\\n    validateMessage?: React.ReactNode | string, // file validation information\\n    autoRemove?: boolean, // Whether to remove the file from the fileList, the default is false\\n    name?: string;\\n    // The URL for previewing image file, usually the storage address returned by the Server after receiving response, supported since v2.63.\\n    // Previous versions can also manually update the controlled properties in the fileList through onChange callback.\\n    url?: string; // support after v2.63\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\nfunction ValidateDemo() {\\n    const afterUpload = ({ response, file }) => {\\n        // It can be returned according to the business interface to determine whether the upload is successful.\\n        if (response.status_code === 200) {\\n            return {\\n                autoRemove: false,\\n                status: 'uploadFail',\\n                validateMessage: 'The content is illegal',\\n                name: 'RenameByServer.jpg',\\n            };\\n        }\\n        return {};\\n    };\\n\\n    return (\\n        <Upload action=\\\"//semi.design/api/upload\\\" afterUpload={afterUpload}>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload\\n            </Button>\\n        </Upload>\\n    );\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"Custom request\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"When customRequest is passed in, it is equivalent to using the custom request method to replace the upload built-in xhr request, and the user needs to take over the upload behavior by himself.\\nThe file object of the current operation can be obtained in the input parameters, and the user implements the upload process by himself, and calls onProgress, onError, and onSuccess in the customRequest input parameters when appropriate to update the internal state of the Upload component\\ncustomRequest contains the following input parameters\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"{\\n     // current file name\\n     fileName: string,\\n     // props.data set by the user\\n     data: object,\\n     // FileItem, refer to the following document for the specific structure\\n     file: FileItem,\\n     // original File Object which extends Blob, the file object actually obtained by the browser (https://developer.mozilla.org/zh-CN/docs/Web/API/File)\\n     fileInstance: File,\\n     // Function that should be called during upload, event needs to include total and loaded attributes\\n     onProgress: (event: {total: number, loaded: number }) => any,\\n     // Function to be called when upload error\\n     onError: (userXhr: {status: number }, e: event) => any,\\n      // The function that should be called after the upload is successful, response is the request result after the upload is successful\\n     onSuccess: (response: any, e?: event) => any,\\n     // props.withCredentials set by the user\\n     withCredentials: boolean,\\n     // props.action set by the user\\n     action: string,\\n}\\n\")), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-jsx\",\n    \"metastring\": \"live=true width=48%\",\n    \"live\": \"true\",\n    \"width\": \"48%\"\n  }, \"import React from 'react';\\nimport { Upload, Button } from '@douyinfe/semi-ui';\\nimport { IconUpload } from '@douyinfe/semi-icons';\\n\\n() => {\\n    const mockRequest = ({ file, onProgress, onError, onSuccess }) => {\\n        let count = 0;\\n        let interval = setInterval(() => {\\n            if (count === 100) {\\n                clearInterval(interval);\\n                onSuccess();\\n                return;\\n            }\\n            onProgress({ total: 100, loaded: count });\\n            count += 20;\\n        }, 500);\\n    };\\n\\n    return (\\n        <Upload action=\\\"//semi.design/api/upload\\\" customRequest={mockRequest}>\\n            <Button icon={<IconUpload />} theme=\\\"light\\\">\\n                Click upload\\n            </Button>\\n        </Upload>\\n    );\\n};\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"API Reference\"), mdx(\"hr\", {\n    parentName: \"section\"\n  }), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Property\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Default Value\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"accept\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"html\"), \" Native attribute, accept uploaded \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept\"\n  }, \"file type\"), \". \", mdx(\"br\", null), \"The value of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"accept\"), \" is the \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types/Complete_list_of_MIME_types\"\n  }, \"MIME types string\"), \" or file that you allow to select the file Suffix (.jpg, etc.)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"action\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"File upload address, required\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"afterUpload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Hook after the file upload, update the file status according to the returned object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(auProps) => afterUploadResult\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"beforeClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Call back before clearing the file, judge whether to continue removing according to the return value, return false, Promise.resolve(false), Promise.reject() will prevent removal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(fileList: Array<FileItem \", \">\", \") => boolean \", \"|\", \" Promise\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"beforeRemove\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback before removing the file, judge whether to continue removing according to the return value, return false, Promise.resolve(false), Promise.reject() will prevent removal\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(file: <FileItem\", \">\", \", fileList: Array<FileItem \", \">\", \") => boolean \", \"|\", \" Promise\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"beforeUpload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The hook before uploading the file, according to the return object to update the file status, control whether to upload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"function(buProps) => beforeUploadResult \", \"|\", \" Promise \", \"|\", \" boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"capture\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The way of media shooting in the file upload control\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" string \", \"|\", \" undefined\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"className\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"class name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"customRequest\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Asynchronous request method for custom upload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(object: customRequestArgs) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"data\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Additional parameters attached to the upload or the method to return the uploaded additional parameters\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"(file: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \") => object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"defaultFileList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"List of uploaded files\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<FileItem\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"[]\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"directory\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Folder type upload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"disabled\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to disable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dragIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Icon on the left side of the drag area\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"<IconUpload />\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dragMainText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Main text of the drag area\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'Click to upload the file or drag and drop the file here'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"dragSubText\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Drag area help text\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"draggable\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to support drag and drop upload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fileList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"A list of uploaded files. When this value is passed in, upload is a controlled component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Array<FileItem\", \">\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fileListTitle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Customize the file list title area. Two forms are supported:\", mdx(\"br\", null), \"1. When passing a ReactNode, only the title text is replaced, and the clear button retains its default style\", mdx(\"br\", null), \"2. When passing a function, you can fully customize the title area (including the clear button). The function parameters are \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"{ fileList, onClear, clearText }\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode \", \"|\", \" (props: RenderFileListTitleProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.75.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"fileName\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"has the same function as name and is mainly used in Form.Upload. In order to avoid conflicts with the props.name of Field, a renamed props is provided here\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"headers\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The headers attached to the upload or the method to return the uploaded additional headers\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"object\", \"|\", \"(file: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \") = > object\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"{}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"hotSpotLocation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"\\u7167\\u7247\\u5899\\u70B9\\u51FB\\u70ED\\u533A\\u7684\\u653E\\u7F6E\\u4F4D\\u7F6E\\uFF0C\\u53EF\\u9009\\u503C \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"start\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"end\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'end'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.5.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"itemStyle\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Inline style of fileCard\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"limit\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Maximum number of files allowed to be uploaded\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"listType\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"File list display type, optional \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"picture\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"list\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'list'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"maxSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Maximum file size limit, in KB\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"minSize\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Minimum file size limit, unit KB\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"multiple\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to allow multiple files to be selected at a time\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"name\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"File name used when uploading\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"''\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onAcceptInvalid\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Triggered when the received file does not conform to the accept specification (generally because the folder selects all types of files / drags and drops files that do not conform to the format)\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(files: File[]) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.24 .0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Called when the file status changes, including upload success, failure, upload, the callback input parameter is Object, including fileList, currentFile, etc.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"({fileList: Array<FileItem\", \">\", \", currentFile?: FileItem}) = > void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when click to clear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onDrop\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Triggered when the dragged element is released on the drag area\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(e, files: Array<File\", \">\", \", fileList: Array<FileItem\", \">\", \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when uploading error\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(error: Error, file: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \", fileList: Array<FileItem\", \">\", \" , xhr: XMLHttpRequest) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onExceed\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when the total number of uploaded files exceeds \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"limit\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(fileList:Array<FileItem\", \">\", \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onFileChange\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback after file selection\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(Array<File\", \">\", \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onOpenFileDialog\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Triggered when opening the system file system file selection pop-up window\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onPreviewClick\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when the file card is clicked\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(fileItem: FileItem) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onProgress\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback when uploading files\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(percent: number, file: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \", fileList: Array<FileItem\", \">\", \" ) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRemove\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback for removing files\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(currentFile: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \", fileList:Array<FileItem\", \">\", \", currentFileItem: FileItem ) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onRetry\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Upload retry callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(file: <FileItem\", \">\", \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSizeError\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"File size invalid callback\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(file:\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \", fileList:Array<FileItem\", \">\", \") => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"onSuccess\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Callback after successful upload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(responseBody: object, file: \", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \", fileList:Array<FileItem\", \">\", \" ) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"picHeight\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set picture display height when listType='picture'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.42.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"picWidth\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Set picture display width when listType='picture'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\", \"|\", \"number\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.42.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"previewFile\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Customize the preview logic, the content returned by this function will replace the original thumbnail\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(fileItem: FileItem) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"prompt\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom slot, which can be used to insert prompt text. Different from writing directly in \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"children\"), \", the content of \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"prompt\"), \" will not trigger upload when clicked.\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"promptPosition\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The position of the prompt text. When the listType is list, the reference object is the children element; when the listType is picture, the reference object is the picture list. Optional values \\u200B\\u200B\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"left\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"right\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"bottom\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'right'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFileItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom rendering of fileCard\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(renderProps: RenderFileItemProps) => ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderFileOperation\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom list item operation area\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(renderProps: RenderFileItemProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.5.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderPicClose\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Customize the photo wall close button, only valid in photo wall mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"({className: string, remove: (e: MouseEvent) => void})=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.75.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderPicInfo\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom photo wall information, only valid in photo wall mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(renderProps: RenderFileItemProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderPicPreviewIcon\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"The preview icon displayed when customizing the photo wall hover, only valid in photo wall mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(renderProps: RenderFileItemProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.5.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"renderThumbnail\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Custom picture wall thumb, only valid in photo wall mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(renderProps: RenderFileItemProps)=>ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showClear\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When limit is not 1 and the current number of uploaded files is greater than 1, whether to show the clear button\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showPicInfo\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to display picture information, only valid in photo wall mode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showReplace\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When the upload is successful, whether to display the replace button inside the fileCard\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showRetry\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When uploading fails, whether to display the retry button inside the fileCard\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showTooltip\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"When the file name is too long, whether to display the tooltip and related configurations: type, the component that carries the floating layer content, supports Tooltip \", \"|\", \" Popover; opts, other properties that need to be passed to the floating layer component; renderTooltip, custom rendering of the popup layer component\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean \", \"|\", \" {type: 'tooltip' \", \"|\", \" 'popover', opts: object, renderTooltip: (content: ReactNode, children: ReactNode) => ReactNode}\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"showUploadList\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to display the file list\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"true\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Style\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"CSSProperties\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"transformFile\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"After selecting the file, the callback function before uploading the file can be used to customize the conversion processing of the file\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(file:\", mdx(\"a\", {\n    parentName: \"td\",\n    \"href\": \"https://developer.mozilla.org/zh-CN/docs/Web/API/File\"\n  }, \"File\"), \") => FileItem\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"-\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"uploadTrigger\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Trigger upload timing, optional values \\u200B\\u200B\", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"auto\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"td\"\n  }, \"custom\")), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"string\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"'auto'\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"validateMessage\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Upload the overall error message\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"ReactNode\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"1.0.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"withCredentials\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Whether to bring cookie information\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"boolean\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"false\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Accessibility\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The Upload component is an interactive control that can trigger file selection when clicking or dragging. After the file is selected, the status will be displayed in the file list.\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"ARIA\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Add \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role=\\\"button\\\"\"), \" to clickable elements\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Add \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"role=\\\"list\\\"\"), \" to the file list and describe it with \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"aria-label\")))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Interfaces\"), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"FileItem Interface\"), mdx(Notice, {\n    title: \"Notice\",\n    mdxType: \"Notice\"\n  }, \"uid is the unique identifier of the file, and upload update and delete logic strongly relies on this value. If the current file is selected and added by upload, uid will be automatically generated. If it is passed in by props.defaultFileList or props.fileList, it must be passed, and you need to ensure that it will not be repeated\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface FileItem {\\n    event?: event, // xhr event\\n    fileInstance?: File, // original File Object which extends Blob, the file object actually obtained by the browser (https://developer.mozilla.org/zh-CN/docs/Web/API/File)\\n    name: string,\\n    percent?: number, // upload progress percentage\\n    preview: boolean, // Whether to preview according to url\\n    response?: any, // xhr's response, response body when the request is successful, and corresponding error when the request fails\\n    shouldUpload?: boolean; // Should you continue to upload\\n    showReplace?: boolean, // Separately control whether the file displays the replace button\\n    showRetry?: boolean, // Separately control whether the file displays the retry button\\n    size: string, // file size, unit kb\\n    status: string, //'success' |'uploadFail' |'validateFail' |'validating' |'uploading' |'wait';\\n    uid: string, // The unique identifier of the file. If the current file is selected and added by upload, the uid will be automatically generated. If it is defaultFileList, you need to ensure that it will not be repeated\\n    url: string,\\n    validateMessage?: ReactNode | string,\\n}\\n\")), mdx(\"h3\", {\n    parentName: \"section\"\n  }, \"RenderFileListTitleProps Interface\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"The parameter type when \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"fileListTitle\"), \" is passed as a function:\"), mdx(\"pre\", {\n    parentName: \"section\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-ts\"\n  }, \"interface RenderFileListTitleProps {\\n    fileList: Array<FileItem>;  // Current file list\\n    onClear: () => void;        // Callback function to clear files\\n    clearText: string;          // Default text for the clear button (based on current locale)\\n}\\n\"))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Methods\"), mdx(\"p\", {\n    parentName: \"section\"\n  }, \"Some internal methods provided by Upload can be accessed through ref:\"), mdx(\"table\", {\n    parentName: \"section\"\n  }, mdx(\"thead\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"thead\"\n  }, mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Name\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Description\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Type\"), mdx(\"th\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Version\"))), mdx(\"tbody\", {\n    parentName: \"table\"\n  }, mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"insert\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Upload file, when index is passed, it will be inserted at the specified position, if not passed, it will be inserted at the end\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"(files: Array<File\", \">\", \", index?: number) => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.2.0\")), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"upload\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"Start upload manually, use with uploadTrigger=\\\"custom\\\"\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  })), mdx(\"tr\", {\n    parentName: \"tbody\"\n  }, mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"openFileDialog\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"open file select Dialog\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"() => void\"), mdx(\"td\", {\n    parentName: \"tr\",\n    \"align\": null\n  }, \"2.21.0\"))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Content Guidelines\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Upload button\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"For the copywriting specification of the form button, refer to \", mdx(\"a\", {\n    parentName: \"li\",\n    \"href\": \"\"\n  }, \"The content Guidelines of the Button component\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Help text\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The help text is written in sentences, the first letter is capitalized, and periods may not be required\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Error message\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Clearly tell the user why the file cannot be uploaded, and tell the user how to upload it successfully\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Help texts are written using sentences, capitalized\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Concise language that users can read at a glance, such as \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"File size must be less than 20MB\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"File type must be .gif, .jpg, .png or .svg\")))))), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"Design Tokens\"), mdx(DesignToken, {\n    mdxType: \"DesignToken\"\n  })), mdx(\"section\", null, mdx(\"h2\", {\n    parentName: \"section\"\n  }, \"FAQ\"), mdx(\"ul\", {\n    parentName: \"section\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When will the retry button appear?\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"showRetry\"), \" is true and the upload of the current file fails due to a network error, the retry button will be displayed. Other statuses such as verification failed, upload successful, etc. will not display the retry button.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When will the replace button appear?\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"When \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"showReplace\"), \" is true and the current file status is uploaded, the replace button will be displayed.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Where did Semi save the pictures?\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Semi is not responsible for the preservation of the image, you need to customize the action when you use the Upload component. You can choose to set action as your own server address or image service address.\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Didn\\u2019t call the XXX method after uploading the picture?\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"If you set \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"accept\"), \", you can try to remove the accept attribute, and then see if the modified method is called. After removing it, the method is called to explain that the file type obtained by accept in the current environment does not match the set accept, and the upload behavior is terminated early. You can make a breakpoint to upload/foundation.js checkFileFormat function to see if the actual value of file.type obtained meets expectations.\")))), mdx(Notice, {\n    title: \"About the progress bar\",\n    mdxType: \"Notice\"\n  }, \"The progress bar indicates the upload progress. The upload progress is divided into two parts: data upload and server return. If all the data has been sent, but the server does not return a response, the progress bar will stay at 90%. The user upload is not completed. At this time, the request in the developer tool will be pending, which is normal. \")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"slug":"en-US/input/upload","next":{"fields":{"slug":"zh-CN/input/upload"},"id":"6b709805-c1e0-5639-bceb-67cd18c69ca7","frontmatter":{"title":"Upload 上传","localeCode":"zh-CN","icon":"doc-upload","showNew":null}},"previous":{"fields":{"slug":"zh-CN/input/treeselect"},"id":"31d5f960-c63f-585b-a6a1-b4b13984d3eb","frontmatter":{"title":"TreeSelect 树选择器","localeCode":"zh-CN","icon":"doc-treeselect","showNew":null}}}},"staticQueryHashes":["1348983216108720","1477422646108720","3245198693108720","417590761108720","63159454108720"]}