@douyinfe/semi-ui 2.1.1 → 2.1.2

package/lib/cjs/upload/fileCard.js

@@ -0,0 +1,388 @@
+"use strict";
+
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/upload/constants");
+
+var _utils = require("@douyinfe/semi-foundation/lib/cjs/upload/utils");
+
+var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
+
+var _index = _interopRequireDefault(require("../iconButton/index"));
+
+var _index2 = _interopRequireDefault(require("../progress/index"));
+
+var _index3 = _interopRequireDefault(require("../tooltip/index"));
+
+var _index4 = _interopRequireDefault(require("../spin/index"));
+
+var _reactUtils = require("../_base/reactUtils");
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+const ErrorSvg = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "7.99992",
+    cy: "7.99992",
+    r: "6.66667",
+    fill: "white"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M15.3332 8.00008C15.3332 12.0502 12.0499 15.3334 7.99984 15.3334C3.94975 15.3334 0.666504 12.0502 0.666504 8.00008C0.666504 3.94999 3.94975 0.666748 7.99984 0.666748C12.0499 0.666748 15.3332 3.94999 15.3332 8.00008ZM8.99984 11.6667C8.99984 11.1145 8.55212 10.6667 7.99984 10.6667C7.44755 10.6667 6.99984 11.1145 6.99984 11.6667C6.99984 12.219 7.44755 12.6667 7.99984 12.6667C8.55212 12.6667 8.99984 12.219 8.99984 11.6667ZM7.99984 3.33341C7.27573 3.33341 6.7003 3.94171 6.74046 4.66469L6.94437 8.33495C6.97549 8.89513 7.4388 9.33341 7.99984 9.33341C8.56087 9.33341 9.02419 8.89513 9.05531 8.33495L9.25921 4.66469C9.29938 3.94171 8.72394 3.33341 7.99984 3.33341Z",
+    fill: "#F93920"
+  }));
+};
+
+const ReplaceSvg = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    width: "28",
+    height: "28",
+    viewBox: "0 0 28 28",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("circle", {
+    cx: "14",
+    cy: "14",
+    r: "14",
+    fill: "#16161A",
+    fillOpacity: "0.6"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9 10.25V18.25L10.25 13.25H17.875V11.75C17.875 11.4739 17.6511 11.25 17.375 11.25H14L12.75 9.75H9.5C9.22386 9.75 9 9.97386 9 10.25Z",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M18 18.25L19 13.25H10.2031L9 18.25H18Z",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+const DirectorySvg = function () {
+  let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  return /*#__PURE__*/_react.default.createElement("svg", (0, _assign.default)({
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M6 17V7.58824C6 7.26336 6.26863 7 6.6 7H10.5L12 8.76471H16.05C16.3814 8.76471 16.65 9.02806 16.65 9.35294V11.1176H7.5L6 17ZM6 17L7.44375 11.1176H18L16.8 17L6 17Z",
+    stroke: "currentColor",
+    strokeWidth: "1.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round"
+  }));
+};
+
+class FileCard extends _react.PureComponent {
+  transSize(size) {
+    if (typeof size === 'number') {
+      return (0, _utils.getFileSize)(size);
+    }
+
+    return size;
+  }
+
+  renderValidateMessage() {
+    const {
+      status,
+      validateMessage
+    } = this.props;
+    let content = null;
+
+    switch (true) {
+      case typeof validateMessage === 'string' && status === _constants.strings.FILE_STATUS_VALIDATING:
+        content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_index4.default, {
+          size: "small",
+          wrapperClassName: "".concat(prefixCls, "-file-card-icon-loading")
+        }), validateMessage);
+        break;
+
+      case typeof validateMessage === 'string':
+        content = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_semiIcons.IconAlertCircle, {
+          className: "".concat(prefixCls, "-file-card-icon-error")
+        }), validateMessage);
+        break;
+
+      case (0, _reactUtils.isElement)(validateMessage):
+        content = validateMessage;
+        break;
+
+      default:
+        break;
+    }
+
+    return content;
+  }
+
+  renderPicValidateMsg() {
+    const {
+      status,
+      validateMessage
+    } = this.props;
+    let icon = null;
+
+    switch (true) {
+      case validateMessage && status === _constants.strings.FILE_STATUS_VALIDATING:
+        icon = /*#__PURE__*/_react.default.createElement(_index4.default, {
+          size: "small",
+          wrapperClassName: "".concat(prefixCls, "-picture-file-card-icon-loading")
+        });
+        break;
+
+      case validateMessage && (status === _constants.strings.FILE_STATUS_VALID_FAIL || status === _constants.strings.FILE_STATUS_UPLOAD_FAIL):
+        icon = /*#__PURE__*/_react.default.createElement("div", {
+          className: "".concat(prefixCls, "-picture-file-card-icon-error")
+        }, /*#__PURE__*/_react.default.createElement(ErrorSvg, null));
+        break;
+
+      default:
+        break;
+    }
+
+    return icon ? /*#__PURE__*/_react.default.createElement(_index3.default, {
+      content: validateMessage,
+      trigger: "hover",
+      position: "bottom"
+    }, icon) : null;
+  }
+
+  renderPic(locale) {
+    const {
+      url,
+      percent,
+      status,
+      disabled,
+      style,
+      onPreviewClick
+    } = this.props;
+    const filePicCardCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-picture-file-card")]: true,
+      ["".concat(prefixCls, "-picture-file-card-disabled")]: disabled,
+      ["".concat(prefixCls, "-picture-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined'
+    });
+    const showProgress = status === _constants.strings.FILE_STATUS_UPLOADING && percent !== 100;
+    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
+    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+    const closeCls = "".concat(prefixCls, "-picture-file-card-close");
+
+    const retry = /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-retry"),
+      onClick: e => this.onRetry(e)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconRefresh, {
+      className: "".concat(prefixCls, "-picture-file-card-icon-retry")
+    }));
+
+    const replace = /*#__PURE__*/_react.default.createElement(_index3.default, {
+      trigger: "hover",
+      position: "top",
+      content: locale.replace,
+      showArrow: false,
+      spacing: 4
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-picture-file-card-replace"),
+      onClick: e => this.onReplace(e)
+    }, /*#__PURE__*/_react.default.createElement(ReplaceSvg, {
+      className: "".concat(prefixCls, "-picture-file-card-icon-replace")
+    })));
+
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: filePicCardCls,
+      style: style,
+      onClick: onPreviewClick
+    }, /*#__PURE__*/_react.default.createElement("img", {
+      src: url
+    }), showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
+      percent: percent,
+      type: "circle",
+      size: "small",
+      orbitStroke: '#FFF'
+    }) : null, showRetry ? retry : null, showReplace && replace, disabled ? null : /*#__PURE__*/_react.default.createElement("div", {
+      className: closeCls,
+      onClick: e => this.onRemove(e)
+    }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, {
+      size: "extra-small"
+    })), this.renderPicValidateMsg());
+  }
+
+  onRemove(e) {
+    e.stopPropagation();
+    this.props.onRemove(this.props, e);
+  }
+
+  onReplace(e) {
+    e.stopPropagation();
+    this.props.onReplace(this.props, e);
+  }
+
+  onRetry(e) {
+    e.stopPropagation();
+    this.props.onRetry(this.props, e);
+  }
+
+  render() {
+    const {
+      name,
+      size,
+      percent,
+      url,
+      listType,
+      preview,
+      previewFile,
+      status,
+      style,
+      onPreviewClick
+    } = this.props;
+    const fileCardCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-file-card")]: true,
+      ["".concat(prefixCls, "-file-card-fail")]: status === _constants.strings.FILE_STATUS_VALID_FAIL || status === _constants.strings.FILE_STATUS_UPLOAD_FAIL,
+      ["".concat(prefixCls, "-file-card-show-pointer")]: typeof onPreviewClick !== 'undefined'
+    });
+    const previewCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-file-card-preview")]: true,
+      ["".concat(prefixCls, "-file-card-preview-placeholder")]: !preview || previewFile
+    });
+    const infoCls = "".concat(prefixCls, "-file-card-info");
+    const closeCls = "".concat(prefixCls, "-file-card-close");
+    const replaceCls = "".concat(prefixCls, "-file-card-replace");
+    const showProgress = !(percent === 100 || typeof percent === 'undefined') && status === _constants.strings.FILE_STATUS_UPLOADING; // only show retry when upload fail & showRetry is true, no need to show during validate fail
+
+    const showRetry = status === _constants.strings.FILE_STATUS_UPLOAD_FAIL && this.props.showRetry;
+    const showReplace = status === _constants.strings.FILE_STATUS_SUCCESS && this.props.showReplace;
+
+    if (listType === _constants.strings.FILE_LIST_PIC) {
+      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+        componentName: "Upload"
+      }, locale => this.renderPic(locale));
+    }
+
+    const fileSize = this.transSize(size);
+    let previewContent = preview ? /*#__PURE__*/_react.default.createElement("img", {
+      src: url
+    }) : /*#__PURE__*/_react.default.createElement(_semiIcons.IconFile, {
+      size: "large"
+    });
+
+    if (previewFile) {
+      previewContent = previewFile(this.props);
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
+      componentName: "Upload"
+    }, locale => /*#__PURE__*/_react.default.createElement("div", {
+      className: fileCardCls,
+      style: style,
+      onClick: onPreviewClick
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: previewCls
+    }, previewContent), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(infoCls, "-main")
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(infoCls, "-main-text")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(infoCls, "-name")
+    }, name), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(infoCls, "-size")
+    }, fileSize), showReplace && /*#__PURE__*/_react.default.createElement(_index3.default, {
+      trigger: "hover",
+      position: "top",
+      showArrow: false,
+      content: locale.replace
+    }, /*#__PURE__*/_react.default.createElement(_index.default, {
+      onClick: e => this.onReplace(e),
+      type: "tertiary",
+      theme: "borderless",
+      size: "small",
+      icon: /*#__PURE__*/_react.default.createElement(DirectorySvg, null),
+      className: replaceCls
+    })))), showProgress ? /*#__PURE__*/_react.default.createElement(_index2.default, {
+      percent: percent,
+      style: {
+        width: '100%'
+      }
+    }) : null, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(infoCls, "-main-control")
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(infoCls, "-validate-message")
+    }, this.renderValidateMessage()), showRetry ? /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(infoCls, "-retry"),
+      onClick: e => this.onRetry(e)
+    }, locale.retry) : null)), /*#__PURE__*/_react.default.createElement(_index.default, {
+      onClick: e => this.onRemove(e),
+      type: "tertiary",
+      icon: /*#__PURE__*/_react.default.createElement(_semiIcons.IconClose, null),
+      theme: "borderless",
+      size: "small",
+      className: closeCls
+    })));
+  }
+
+}
+
+FileCard.propTypes = {
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  listType: _propTypes.default.string,
+  name: _propTypes.default.string,
+  onPreviewClick: _propTypes.default.func,
+  onRemove: _propTypes.default.func,
+  onReplace: _propTypes.default.func,
+  onRetry: _propTypes.default.func,
+  percent: _propTypes.default.number,
+  preview: _propTypes.default.bool,
+  previewFile: _propTypes.default.func,
+  showReplace: _propTypes.default.bool,
+  showRetry: _propTypes.default.bool,
+  size: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  status: _propTypes.default.string,
+  style: _propTypes.default.object,
+  url: _propTypes.default.string,
+  validateMessage: _propTypes.default.node
+};
+FileCard.defaultProps = {
+  listType: _constants.strings.FILE_LIST_DEFAULT,
+  name: '',
+  onRemove: () => undefined,
+  onRetry: () => undefined,
+  preview: false,
+  size: ''
+};
+var _default = FileCard;
+exports.default = _default;

package/lib/cjs/upload/index.d.ts

@@ -0,0 +1,161 @@
+import { ReactNode, CSSProperties, RefObject, ChangeEvent, DragEvent } from 'react';
+import PropTypes from 'prop-types';
+import UploadFoundation, { UploadAdapter, BeforeUploadObjectResult, AfterUploadResult } from '@douyinfe/semi-foundation/lib/cjs/upload/foundation';
+import FileCard from './fileCard';
+import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
+import { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError } from './interface';
+import { Locale } from '../locale/interface';
+import '@douyinfe/semi-foundation/lib/cjs/upload/upload.css';
+export { FileItem, RenderFileItemProps, UploadListType, PromptPositionType, BeforeUploadProps, AfterUploadProps, OnChangeProps, customRequestArgs, CustomError, BeforeUploadObjectResult, AfterUploadResult };
+export interface UploadProps {
+    accept?: string;
+    action: string;
+    afterUpload?: (object: AfterUploadProps) => AfterUploadResult;
+    beforeUpload?: (object: BeforeUploadProps) => BeforeUploadObjectResult | Promise<BeforeUploadObjectResult> | boolean;
+    beforeClear?: (fileList: Array<FileItem>) => boolean | Promise<boolean>;
+    beforeRemove?: (file: FileItem, fileList: Array<FileItem>) => boolean | Promise<boolean>;
+    capture?: boolean | string | undefined;
+    children?: ReactNode;
+    className?: string;
+    customRequest?: (object: customRequestArgs) => void;
+    data?: Record<string, any> | ((file: File) => Record<string, unknown>);
+    defaultFileList?: Array<FileItem>;
+    directory?: boolean;
+    disabled?: boolean;
+    dragIcon?: ReactNode;
+    dragMainText?: ReactNode;
+    dragSubText?: ReactNode;
+    draggable?: boolean;
+    fileList?: Array<FileItem>;
+    fileName?: string;
+    headers?: Record<string, any> | ((file: File) => Record<string, string>);
+    itemStyle?: CSSProperties;
+    limit?: number;
+    listType?: UploadListType;
+    maxSize?: number;
+    minSize?: number;
+    multiple?: boolean;
+    name?: string;
+    onAcceptInvalid?: (files: File[]) => void;
+    onChange?: (object: OnChangeProps) => void;
+    onClear?: () => void;
+    onDrop?: (e: Event, files: Array<File>, fileList: Array<FileItem>) => void;
+    onError?: (e: CustomError, file: File, fileList: Array<FileItem>, xhr: XMLHttpRequest) => void;
+    onExceed?: (fileList: Array<File>) => void;
+    onFileChange?: (files: Array<File>) => void;
+    onOpenFileDialog?: () => void;
+    onPreviewClick?: (fileItem: FileItem) => void;
+    onProgress?: (percent: number, file: File, fileList: Array<FileItem>) => void;
+    onRemove?: (currentFile: File, fileList: Array<FileItem>, currentFileItem: FileItem) => void;
+    onRetry?: (fileItem: FileItem) => void;
+    onSizeError?: (file: File, fileList: Array<FileItem>) => void;
+    onSuccess?: (responseBody: any, file: File, fileList: Array<FileItem>) => void;
+    previewFile?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    prompt?: ReactNode;
+    promptPosition?: PromptPositionType;
+    renderFileItem?: (renderFileItemProps: RenderFileItemProps) => ReactNode;
+    showClear?: boolean;
+    showReplace?: boolean;
+    showRetry?: boolean;
+    showUploadList?: boolean;
+    style?: CSSProperties;
+    timeout?: number;
+    transformFile?: (file: File) => FileItem;
+    uploadTrigger?: 'auto' | 'custom';
+    validateMessage?: ReactNode;
+    validateStatus?: ValidateStatus;
+    withCredentials?: boolean;
+}
+export interface UploadState {
+    dragAreaStatus: 'default' | 'legal' | 'illegal';
+    fileList: Array<FileItem>;
+    inputKey: number;
+    localUrls: Array<string>;
+    replaceIdx: number;
+    replaceInputKey: number;
+}
+declare class Upload extends BaseComponent<UploadProps, UploadState> {
+    static propTypes: {
+        accept: PropTypes.Requireable<string>;
+        action: PropTypes.Validator<string>;
+        afterUpload: PropTypes.Requireable<(...args: any[]) => any>;
+        beforeClear: PropTypes.Requireable<(...args: any[]) => any>;
+        beforeRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        beforeUpload: PropTypes.Requireable<(...args: any[]) => any>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        className: PropTypes.Requireable<string>;
+        customRequest: PropTypes.Requireable<(...args: any[]) => any>;
+        data: PropTypes.Requireable<object>;
+        defaultFileList: PropTypes.Requireable<any[]>;
+        directory: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dragIcon: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dragMainText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        dragSubText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        draggable: PropTypes.Requireable<boolean>;
+        fileList: PropTypes.Requireable<any[]>;
+        fileName: PropTypes.Requireable<string>;
+        headers: PropTypes.Requireable<object>;
+        itemStyle: PropTypes.Requireable<object>;
+        limit: PropTypes.Requireable<number>;
+        listType: PropTypes.Requireable<"picture" | "list">;
+        maxSize: PropTypes.Requireable<number>;
+        minSize: PropTypes.Requireable<number>;
+        multiple: PropTypes.Requireable<boolean>;
+        name: PropTypes.Requireable<string>;
+        onAcceptInvalid: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrop: PropTypes.Requireable<(...args: any[]) => any>;
+        onError: PropTypes.Requireable<(...args: any[]) => any>;
+        onExceed: PropTypes.Requireable<(...args: any[]) => any>;
+        onFileChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onOpenFileDialog: PropTypes.Requireable<(...args: any[]) => any>;
+        onPreviewClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onProgress: PropTypes.Requireable<(...args: any[]) => any>;
+        onRemove: PropTypes.Requireable<(...args: any[]) => any>;
+        onRetry: PropTypes.Requireable<(...args: any[]) => any>;
+        onSizeError: PropTypes.Requireable<(...args: any[]) => any>;
+        onSuccess: PropTypes.Requireable<(...args: any[]) => any>;
+        previewFile: PropTypes.Requireable<(...args: any[]) => any>;
+        prompt: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        promptPosition: PropTypes.Requireable<"left" | "right" | "bottom">;
+        renderFileItem: PropTypes.Requireable<(...args: any[]) => any>;
+        showClear: PropTypes.Requireable<boolean>;
+        showReplace: PropTypes.Requireable<boolean>;
+        showRetry: PropTypes.Requireable<boolean>;
+        showUploadList: PropTypes.Requireable<boolean>;
+        style: PropTypes.Requireable<object>;
+        timeout: PropTypes.Requireable<number>;
+        transformFile: PropTypes.Requireable<(...args: any[]) => any>;
+        uploadTrigger: PropTypes.Requireable<"auto" | "custom">;
+        validateMessage: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
+        withCredentials: PropTypes.Requireable<boolean>;
+    };
+    static defaultProps: Partial<UploadProps>;
+    static FileCard: typeof FileCard;
+    constructor(props: UploadProps);
+    static getDerivedStateFromProps(props: UploadProps): Partial<UploadState> | null;
+    get adapter(): UploadAdapter<UploadProps, UploadState>;
+    foundation: UploadFoundation;
+    inputRef: RefObject<HTMLInputElement>;
+    replaceInputRef: RefObject<HTMLInputElement>;
+    componentWillUnmount(): void;
+    onClick: () => void;
+    onChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    replace: (index: number) => void;
+    onReplaceChange: (e: ChangeEvent<HTMLInputElement>) => void;
+    clear: () => void;
+    remove: (fileItem: FileItem) => void;
+    upload: () => void;
+    renderFile: (file: FileItem, index: number, locale: Locale['Upload']) => ReactNode;
+    renderFileList: () => ReactNode;
+    onDrop: (e: DragEvent<HTMLDivElement>) => void;
+    onDragOver: (e: DragEvent<HTMLDivElement>) => void;
+    onDragLeave: (e: DragEvent<HTMLDivElement>) => void;
+    onDragEnter: (e: DragEvent<HTMLDivElement>) => void;
+    renderDragArea: () => ReactNode;
+    render(): ReactNode;
+}
+export default Upload;