import { ReactNode, FocusEventHandler } from 'react'; import { DropEvent } from 'react-dropzone'; import { FileListProps, FileObject } from '@befe/brick-comp-file-list'; import { Json, StringIndexedObject } from '@befe/brick-utils'; import { ConfiguredComponent } from '@befe/brick-core'; import { UploadDropzoneProps } from './upload-dropzone'; /** * @public */ export interface UploadFileObject extends FileObject { /** * 唯一标识 */ id?: string | number; /** * 文件名 */ name: string; /** * file 对象 * https://developer.mozilla.org/en-US/docs/Web/API/File */ file?: File; /** * 文件上传的 xhr 对象 * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest */ xhr?: XMLHttpRequest; /** * 上传请求响应结果 text */ responseText?: string; /** * 上传请求响应结果 json * 仅 responseText 为合法 json 格式时有值 */ responseJson?: Json; } interface UploadFileObjectWithXHR extends UploadFileObject { xhr: XMLHttpRequest; } type PropsFromFileList = Pick; type PropsFromDropzone = Pick; /** * related to props.renderFileList * @public */ export interface FileListRenderProps { /** * 当前 state.fileList */ fileList: UploadFileObject[]; /** * 对 fileObject 进行删除,如 file 未完成上传会同时进行 xhr.abort() */ remove: (fileObj: UploadFileObject) => void; /** * 对 fileObject 进行重试上传 */ retry: (fileObj: UploadFileObject) => void; } export interface UploadProps extends PropsFromFileList, PropsFromDropzone { /** * 自定义 class */ className?: string; /** * 文件列表控制值 * 控制为 `null` 即为 "无 fileList 情景" * * **注意** "无 fileList 情景下", state fileList 将一直持有已上传的 file, * 即 `props.onChange(fileList)` 的 fileList 会一直增加 * * 对于需要的 "上传文件列表" 和 "上传按钮" 分开 render 的情景,或许你需要的是 props.renderFileList * **注意** "prop.fileList: null" 时,`props.allowDuplicate` 将被忽略,"无 fileList 模式" 下,不存在所谓的重名判断 */ fileList?: UploadFileObject[] | null; /** * 文件列表默认值 * 注意,不支持设置为 `null`,即无法在非控制模式下达到 "无 fileList 情景" */ defaultFileList?: UploadFileObject[]; /** * 是否禁用 */ disabled?: boolean; /** * 上传地址 */ url?: string; /** * 请求方法 */ method?: string; /** * 是否多选 */ multiple?: boolean; /** * 接受上传的文件类型 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept */ accept?: string | string[]; /** * 最大文件大小(bytes) */ maxSize?: number; /** * 最大文件(总)数量 * * 注意,是对多次上传总数量进行限制,而非单次操作的选择数量限制(上传操作操可能多次) */ maxLength?: number; /** * 请求参数 * { [key]: string | number } */ params?: StringIndexedObject; /** * 请求头 * { [key]: string } */ headers?: StringIndexedObject; /** * 上传参数中文件字段的name值 */ fileFieldName?: string; /** * 提示信息 */ hint?: ReactNode; /** * 是否允许选择重复文件(名),重复文件名显示上会标记序号前缀 (n) * * **注意** `props.allowDuplicate` 将被忽略,"无 fileList 模式" 下,不存在所谓的重名判断 */ allowDuplicate?: boolean; /** * 自定义 file list 的渲染 * * 特别的,对于需要 "文件列表" 和 "上传按钮" 需要分开渲染的情况,可以指定为 `() => null`,然后自行用 fileList 进行渲染。 * * 在非控制模式下, `props.renderFileList: () => null` 的效果和原 `props.fileList: null` 是一样的 */ renderFileList?: (renderProps: FileListRenderProps) => ReactNode; /** * uploadRequest 响应成功的判断函数 */ isResponseSuccess?: (respJson: Json | undefined, respText: string) => boolean; /** * uploadRequest 响应成功的判断函数 */ getResponseMessage?: (respJson: Json | undefined, respText: string) => string; /** * 文件列表变化回调, * 任一文件的发生 load-start / load-progress / load-success / load-fail / remove 均会回调 * */ onChange?: (fileList: UploadFileObject[]) => void; /** * 删除文件的回调,根据返回值进行 fileList 的 change 行为 * - promise,当 promise resolve 后进行 * - false,visible 不进行 * - true | void,立即进行 */ onRemove?: (file: UploadFileObject, fileList: UploadFileObject[], currentFileList: UploadFileObject[]) => Promise | boolean | void; /** * 文件上传开始的回调 * progress === 0 */ onLoadStart?: (file: UploadFileObject, fileList: UploadFileObject[]) => void; /** * 文件上传进程变化的回调 * progress in (0, 1) */ onLoadProgress?: (file: UploadFileObject, fileList: UploadFileObject[]) => void; /** * 文件上传成功的回调 * progress === 1 */ onLoadSuccess?: (file: UploadFileObject, fileList: UploadFileObject[]) => void; /** * 文件上传错误的回调 * progress === 1 */ onLoadFail?: (file: UploadFileObject, fileList: UploadFileObject[]) => void; /** * @private for form field, for now */ onFocus?: FocusEventHandler; /** * @private for form field, for now */ onBlur?: FocusEventHandler; /** * UploadDropzone 接受 files 时回调 * * - 内部将使用返回的 files 进行 upload 处理 * - 如果返回 falsy files,则内部继续使用原 files 进行 upload 处理 */ onDropAccepted?: (files: File[], e: DropEvent) => File[]; /** * UploadDropzone 拒绝接受 files 时的回调 * * - 内部将使用返回的 files 进行异常处理包括,如 toast over_size message * - 如果返回 falsy files,则内部继续使用原 files 进行异常处理 */ onDropRejected?: (files: File[], e: DropEvent) => File[]; } interface ParamObject { name: string; value: string; } interface UploadState { fileList: UploadFileObject[]; } type ProgressHandlerCreator = (fileObj: UploadFileObjectWithXHR) => (event: ProgressEvent) => void; type UploadCallbackType = 'start' | 'progress' | 'success' | 'fail'; export declare class Upload extends ConfiguredComponent { static displayName: string; static defaultProps: { className: string; fileFieldName: string; method: string; allowDuplicate: boolean; multiple: boolean; }; static initFileId(fileObj: FileObject): FileObject; static getDerivedStateFromProps(nextProps: UploadProps): { fileList: FileObject[]; } | null; private _isMounted; componentLocale: import("@befe/brick-core").ComponentLocale<{ zh_cn: { upload_file: string; duplicate_file: string; exceed_max_size: string; exceed_max_length: string; }; en_us: { upload_file: string; /** * 文件上传的 xhr 对象 * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest */ duplicate_file: string; exceed_max_size: string; exceed_max_length: (maxLength: number, selected: number, total: number) => string; }; }>; state: UploadState; constructor(props: UploadProps); get className(): string; get size(): "sm" | "md" | "xs" | "lg"; get paramList(): ParamObject[]; get fileListData(): { disableRetry: boolean | undefined; /** * 唯一标识 */ id?: string | number | undefined; /** * 文件名 */ name: string; /** * file 对象 * https://developer.mozilla.org/en-US/docs/Web/API/File */ file?: File | undefined; /** * 文件上传的 xhr 对象 * https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest */ xhr?: XMLHttpRequest | undefined; /** * 上传请求响应结果 text */ responseText?: string | undefined; /** * 上传请求响应结果 json * 仅 responseText 为合法 json 格式时有值 */ responseJson?: Json | undefined; className?: string | undefined; type?: "html" | "img" | "pdf" | "excel" | "ppt" | "word" | "zip" | "eml" | "txt" | "other" | undefined; previewUrl?: string | undefined; downloadUrl?: string | undefined; downloadTarget?: string | undefined; error?: string | boolean | undefined; progress?: number | boolean | undefined; disableRemove?: boolean | undefined; /** * file 对象 * https://developer.mozilla.org/en-US/docs/Web/API/File */ disableDownload?: boolean | undefined; disablePreview?: boolean | undefined; size?: number | undefined; }[]; get isNonList(): boolean; get allowDuplicate(): boolean | undefined; handleDropAccepted: (files: File[], e: DropEvent) => boolean; handleDropRejected: (files: File[], e: DropEvent) => void; createFileObject(file: File, xhr: XMLHttpRequest): UploadFileObjectWithXHR; createFormData(file: File): FormData; parseRespJSON(respText: string): Json | undefined; isResponseSuccess(respText: string): boolean | undefined; getResponseMessage(respText: string, respJson: Json | undefined): string | undefined; createXHR(file: File, originFileObj?: UploadFileObject): void; getFileObjectFromState(fileObj: UploadFileObject): UploadFileObject; loadstartHandler: ProgressHandlerCreator; progressHandler: ProgressHandlerCreator; loadHandler: ProgressHandlerCreator; errorHandler: ProgressHandlerCreator; handleUploadSuccess(fileObj: UploadFileObjectWithXHR): void; handleUploadFail(fileObj: UploadFileObjectWithXHR): void; handleRetry: (fileObj: UploadFileObject) => void; handleRemove: (fileObj: UploadFileObject) => Promise | undefined; invokeUploadCallback(type: UploadCallbackType, fileObj: UploadFileObject, fileList: UploadFileObject[]): void; updateFileState(fileObj: UploadFileObject, type: UploadCallbackType): void; changeFileList(fileList: UploadFileObject[]): void; renderFileList(): ReactNode; renderUploadButton(): import("react/jsx-runtime").JSX.Element; renderDropzone(): import("react/jsx-runtime").JSX.Element; renderHint(): false | "" | 0 | import("react/jsx-runtime").JSX.Element | null | undefined; componentDidUpdate(prevProps: Readonly): void; componentDidMount(): void; componentWillUnmount(): void; render(): import("react/jsx-runtime").JSX.Element; } export {};