@sms-frontend/components

import { CSSProperties, ReactNode } from 'react'; import { ProgressProps } from '../Progress'; export declare const STATUS: { [key: string]: UploadStatus; }; export declare type UploadStatus = 'init' | 'uploading' | 'done' | 'error'; export declare type ListType = 'text' | 'picture-list' | 'picture-card'; export declare type CustomIconType = { previewIcon?: ReactNode; removeIcon?: ReactNode; fileIcon?: ReactNode; reuploadIcon?: ReactNode; cancelIcon?: ReactNode; startIcon?: ReactNode; errorIcon?: ReactNode; successIcon?: ReactNode; fileName?: (file: UploadItem) => ReactNode; }; export declare type RequestOptions = Pick<UploadProps, 'headers' | 'name' | 'data' | 'withCredentials' | 'action'> & { /** 更新当前文件的上传进度。percent: 当前上传进度百分比 */ onProgress: (percent: number, event?: ProgressEvent) => void; /** 上传成功后，调用onSuccess方法，传入的response参数将会附加到当前上传文件的reponse字段上 */ onSuccess: (response?: object) => void; /** 上传失败后，调用onError方法，传入的 response 参数将会附加到当前上传文件的response字段 */ onError: (response?: object) => void; /** 当前上传文件 */ file: File; }; export interface UploadRequestReturn { abort?: () => void; [key: string]: any; } export declare type UploadRequest = (options: RequestOptions) => UploadRequestReturn | void; /** * @title Upload */ export interface UploadProps { style?: CSSProperties; className?: string | string[]; /** * @zh 默认已上传的文件列表 * @en Default list of files that have been uploaded */ defaultFileList?: UploadItem[]; /** * @zh 已上传的文件列表 * @en List of files that have been uploaded */ fileList?: UploadItem[]; /** * @zh 文件夹上传 * @en Support upload whole directory * @version 2.11.0 */ directory?: boolean; /** * @zh 接受上传的类型 [详细请参考](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) * @en Accepted [file types](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) */ accept?: string; /** * @zh 通过覆盖默认的上传行为，可以自定义自己的上传实现 * @en Provide an override for the default xhr behavior for additional customization */ customRequest?: (options: RequestOptions) => UploadRequestReturn | void; /** * @zh 展示类型 * @en Upload list Style * @defaultValue text */ listType?: 'text' | 'picture-list' | 'picture-card'; /** * @zh * 是否展示上传文件列表。预览图标，删除图标，文件图标，重新上传图标，取消上传图标。 * @en * Whether to show upload list.It can be an object to customize the `previewIcon`, `removeIcon`, * `fileIcon`, `reuploadIcon`, `cancelIcon`, `startIcon`, `errorIcon` and `fileName` * @defaultValue true */ showUploadList?: boolean | CustomIconType; /** * @zh 是否选中文件后自动上传 * @en Whether to automatically upload files after selecting them * @defaultValue true */ autoUpload?: boolean; /** * @zh action * @en Uploading URL */ action?: string; /** * @zh 限制上传数量。超出后会隐藏 * @en maximum number of uploads allowed */ limit?: number; /** * @zh 禁用 * @en Whether to disable */ disabled?: boolean; /** * @zh 是否拖拽上传 * @en Whether to enable drag and drop upload */ drag?: boolean; /** * @zh 文件多选 * @en Whether to allow multiple files to be selected */ multiple?: boolean; /** * @zh 提示文字，listType 不同，展示会有区别 * @en The tip text */ tip?: string | React.ReactNode; /** * @zh 上传时使用的 headers * @en Set request headers */ headers?: object; /** * @zh 上传时的 Body 参数 * @en additions params of request */ data?: object | ((any: any) => object); /** * @zh 发请求时文件内容的参数名 * @en The key name of uploading file */ name?: string | ((any: any) => string); /** * @zh 上传请求是否携带 cookie * @en Whether to carry cookies when uploading requests */ withCredentials?: boolean; /** * @zh 进度条属性，接收所有进度条的 props。 * @en The props of [Progress component](/react/en-US/components/progress). */ progressProps?: Partial<ProgressProps>; /** * @zh 自定义上传列表项 * @en Custom item of uploadList */ renderUploadItem?: (originNode: ReactNode, file: UploadItem, fileList: UploadItem[]) => ReactNode; /** * @zh 自定义展示上传文件列表 * @en Custom uploadList */ renderUploadList?: (fileList: UploadItem[], uploadListProps: UploadListProps) => ReactNode; /** * @zh 上传文件改变时的回调。文件开始上传，失败，成功时会触发。注意：如果需要实时获取文件的上传进度，请在 `onProgress` 中处理。 * @en Callback when uploading state is changing */ onChange?: (fileList: UploadItem[], file: UploadItem) => void; /** * @zh 点击预览时候的回调 * @en Callback when the preview icon is clicked */ onPreview?: (file: UploadItem) => void; /** * @zh 点击删除文件时的回调。返回 `false` 或者 `Promise.reject` 的时候不会执行删除。 * @en Callback when the remove icon is clicked.Remove actions will be aborted when the return value is false or a Promise which resolve(false) or reject. */ onRemove?: (file: UploadItem, fileList: UploadItem[]) => void; /** * @zh 文件上传进度的回调 * @en Callback when uploading progress is changing */ onProgress?: (file: UploadItem, e?: ProgressEvent) => void; /** * @zh 文件重新上传时触发的回调 * @en Callback when the re-upload icon is clicked */ onReupload?: (file: UploadItem) => void; /** * @zh 超出上传数量限制时触发 * @en Callback when limit is exceeded */ onExceedLimit?: (files: File[], fileList: UploadItem[]) => void; /** * @zh 上传文件之前的回调。返回 false 或者 promise抛出异常的时候会取消上传。 * @en Callback before uploading. Uploading will be aborted when the return value is false or a Promise which resolve(false) or reject. * @defaultValue () => true */ beforeUpload?: (file: File, filesList: File[]) => boolean | Promise<any>; } /** * @title UploadListProps * @zh 文件上传列表展示 * @en File upload list display */ export interface UploadListProps { listType?: string; fileList?: UploadItem[]; showUploadList?: boolean | CustomIconType; progressProps?: Partial<ProgressProps>; onUpload?: (file: UploadItem) => void; /** * @zh 中止文件上传的回调 * @en Callback when the cancel icon is clicked */ onAbort?: (file: UploadItem) => void; /** * @zh 点击删除文件时的回调。返回 false 或者 Promise.reject 的时候不会执行删除 * @en Callback when the remove icon is clicked.Remove actions will be aborted when the return value is false or a Promise which resolve(false) or reject */ onRemove?: (file: UploadItem) => void; /** * @zh 重新上传的回调 * @en Callback when the re-upload icon is clicked */ onReupload?: (file: UploadItem) => void; /** * @zh 点击预览时候的回调。 * @en Callback when the preview icon is clicked */ onPreview?: (file: UploadItem) => void; /** * @zh 禁用 * @en Whether to disable */ disabled?: boolean; renderUploadItem?: (originNode: ReactNode, file: UploadItem, fileList: UploadItem[]) => ReactNode; renderUploadList?: (fileList: UploadItem[], uploadListProps: Omit<UploadListProps, 'renderUploadList'>) => ReactNode; prefixCls?: string; } /** * @title UploadItem */ export declare type UploadItem = { /** * @zh 当前上传文件的唯一标示 * @en Unique identifier */ uid: string; /** * @zh 当前上传文件的状态 * @en Uploading status */ status?: UploadStatus; /** * @zh 文件对象 * @en File Object */ originFile?: File; /** * @zh 上传进度百分比 * @en Upload progress percentage */ percent?: number; /** * @zh 当前文件上传请求返回的响应 * @en Response of upload request */ response?: object; /** * @zh 文件 url * @en File url */ url?: string; /** * @zh 文件名 * @en File name */ name?: string; }; export interface UploaderProps extends UploadProps { prefixCls?: string; onFileStatusChange?: (file: UploadItem) => void; } export declare type TriggerProps = { tip?: string | React.ReactNode; multiple?: boolean; accept?: string; disabled?: boolean; directory?: boolean; drag?: boolean; listType?: 'text' | 'picture-list' | 'picture-card'; onClick: () => void; onDragFiles: (files: File[]) => void; prefixCls?: string; }; export declare type UploadInstance = { /** 手动上传时，调用该方法，开始上传。不传参数时，会默认上传全部init状态的文件 */ submit: (file?: UploadItem) => void; /** 中止文件上传 */ abort: (file: UploadItem) => void; /** 重新上传文件 */ reupload: (file: UploadItem) => void; };