@alifd/next/types/upload/index.d.ts

/// <reference types="react" />

import * as React from 'react';
import CommonProps from '../util';
import { ProgressProps } from '../progress';

interface HTMLAttributesWeak extends React.HTMLAttributes<HTMLElement> {
    onError?: any;
    onSelect?: any;
    defaultValue?: any;
    onChange?: any;
}

export interface CardProps extends HTMLAttributesWeak, CommonProps {
    /**
     * 上传的地址
     */
    action?: string;

    /**
     * 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件
     */
    multiple?: boolean;
 
    /**
     * 展示下载按钮
     */
    showDownload?: boolean;

    /**
     * 接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)
     */
    accept?: string;

    /**
     * 上传额外传参
     */
    data?: any | (() => void);

    /**
     * 设置上传的请求头部
     */
    headers?: any;

    /**
     * 是否允许请求携带 cookie
     */
    withCredentials?: boolean;

    /**
     * 可选参数, 详见 [beforeUpload](#beforeUpload)
     */
    beforeUpload?: (file: {}, options: {}) => boolean | {} | any;

    /**
     * 上传中
     */
    onProgress?: () => void;

    /**
     * 可选参数，上传成功回调函数，参数为请求下响应信息以及文件
     */
    onSuccess?: (file: {}, value: Array<any>) => void;

    /**
     * 可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件
     */
    onError?: (file: {}, value: Array<any>) => void;

    /**
     * 子元素
     */
    children?: React.ReactNode;

    /**
     * 设置上传超时,单位ms
     */
    timeout?: number;

    /**
     * 上传方法
     */
    method?: 'post' | 'put';

    /**
     * 自定义上传方法
     */
    request?: (option: {}) => void;

    /**
     * 文件名字段
     */
    name?: string;

    /**
     * 选择文件回调
     */
    onSelect?: () => void;

    /**
     * 放文件
     */
    onDrop?: () => void;

    /**
     * 样式前缀
     */
    prefix?: string;

    /**
     * 文件列表
     */
    value?: Array<any>;

    /**
     * 默认文件列表
     */
    defaultValue?: Array<any>;

    /**
     * 上传按钮形状
     */
    shape?: 'card';

    /**
     * 上传列表的样式
     */
    listType?: 'text' | 'image' | 'card';

    /**
     * 数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)
     */
    formatter?: (response: {}, file: any) => void;

    /**
     * 最大文件上传个数
     */
    limit?: number;

    /**
     * 可选参数，是否支持拖拽上传，`ie10+` 支持。
     */
    dragable?: boolean;

    /**
     * 可选参数，是否本地预览
     */
    useDataURL?: boolean;

    /**
     * 可选参数，是否禁用上传功能
     */
    disabled?: boolean;

    /**
     * 改变时候的回调
     */
    onChange?: (value: File[]) => void;

    /**
     * 可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.
     */
    afterSelect?: (file: {}) => boolean;

    /**
     * 点击移除的回调
     */
    onRemove?: () => void;

    /**
     * 自定义class
     */
    className?: string;

    /**
     * 自定义内联样式
     */
    style?: React.CSSProperties;

    /**
     * 自动上传
     */
    autoUpload?: boolean;

    /**
     * 透传给Progress props
     */
    progressProps?: ProgressProps;

    /**
     * 点击图片回调
     */
    onPreview?: () => void;

    /**
     * 取消上传的回调
     */
    onCancel?: () => void;
    /**
     * 调用系统设备媒体
     */
     capture?: string;
}

export class Card extends React.Component<CardProps, any> {}

export class Dragger extends React.Component<UploadProps, any> {}

export interface SelecterProps extends HTMLAttributesWeak, CommonProps {
    /**
     * 是否禁用上传功能
     */
    disabled?: boolean;

    /**
     * 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件
     */
    multiple?: boolean;

    /**
     * 是否支持拖拽上传，`ie10+` 支持。
     */
    dragable?: boolean;

    /**
     * 接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)
     */
    accept?: string;

    /**
     * 文件选择回调
     */
    onSelect?: (e: React.ChangeEvent<HTMLInputElement>) => void;

    /**
     * 拖拽经过回调
     */
    onDragOver?: () => void;

    /**
     * 拖拽离开回调
     */
    onDragLeave?: () => void;

    /**
     * 拖拽完成回调
     */
    onDrop?: () => void;

    /**
     * 是否支持上传文件夹，仅在 chorme 下生效
     */
    webkitdirectory?: boolean;
}

export class Selecter extends React.Component<SelecterProps, any> {}

export class Uploader {
    /**
     * @param options 配置
     */
    constructor(options?: any);

    /**
     * 配置选项
     * @param options 配置
     */
    setOptions(options: any): void;
    /**
     * 开始上传
     * @param files 文件列表
     */
    startUpload(files: Array<any>): void;
    /**
     * 中断某个文件上传
     * @param file 文件
     */
    abort(file: any): void;
}

export interface UploadProps extends HTMLAttributesWeak, CommonProps {
    /**
     * 上传的地址
     */
    action?: string;

    /**
     * 接受上传的文件类型 (image/png, image/jpg, .doc, .ppt) 详见 [input accept attribute](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/Input#attr-accept)
     */
    accept?: string;

    /**
     * 上传额外传参
     */
    data?: any | (() => void);

    /**
     * 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件
     */
    multiple?: boolean;

    /**
     * 设置上传的请求头部
     */
    headers?: any;

    /**
     * 是否允许请求携带 cookie
     */
    withCredentials?: boolean;

    /**
     * 可选参数, 详见 [beforeUpload](#beforeUpload)
     */
    beforeUpload?: (file: any, options: any) => boolean | {} | any;

    /**
     * 上传中
     */
    onProgress?: () => void;

    /**
     * 可选参数，上传成功回调函数，参数为请求下响应信息以及文件
     */
    onSuccess?: (file: any, value: Array<any>) => void;

    /**
     * 可选参数，上传失败回调函数，参数为上传失败的信息、响应信息以及文件
     */
    onError?: (file: any, value: Array<any>) => void;

    /**
     * 子元素
     */
    children?: React.ReactNode;

    /**
     * 设置上传超时,单位ms
     */
    timeout?: number;

    /**
     * 上传方法
     */
    method?: 'post' | 'put';

    /**
     * 自定义上传方法
     */
    request?: (option: any) => any;

    /**
     * 文件名字段
     */
    name?: string;

    /**
     * 选择文件回调
     */
    onSelect?: (uploadFiles: Array<any>, value: Array<any>) => void;

    /**
     * 放文件
     */
    onDrop?: () => void;

    /**
     * 样式前缀
     */
    prefix?: string;

    /**
     * 文件列表
     */
    value?: Array<any>;

    /**
     * 默认文件列表
     */
    defaultValue?: Array<any>;

    /**
     * 上传按钮形状
     */
    shape?: 'card';

    /**
     * 上传列表的样式
     */
    listType?: 'text' | 'image' | 'card';

    /**
     * 数据格式化函数，配合自定义 action 使用，参数为服务器的响应数据，详见 [formatter](#formater)
     */
    formatter?: (response: any, file: any) => void;

    /**
     * 最大文件上传个数
     */
    limit?: number;

    /**
     * 可选参数，是否支持拖拽上传，`ie10+` 支持。
     */
    dragable?: boolean;

    /**
     * 可选参数，是否本地预览
     */
    useDataURL?: boolean;

    /**
     * 可选参数，是否禁用上传功能
     */
    disabled?: boolean;

    /**
     * 上传文件改变时的状态
     */
    onChange?: (value: File[]) => void;

    /**
     * 可选参数, 用于校验文件,afterSelect仅在 autoUpload=false 的时候生效,autoUpload=true时,可以使用beforeUpload完全可以替代该功能.
     */
    afterSelect?: (file: any) => boolean;

    /**
     * 移除文件回调函数
     */
    onRemove?: (file: any) => boolean | any;

    /**
     * 自定义额外渲染
     */
    extraRender?: (file: File) => any;
    /**
     * 自定义文件名渲染
     */
    fileNameRender?: (file: File) => any;
    /**
     * 自定义操作区域渲染
     */
    actionRender?: (file: File) => any;
    /**
     * 自定义class
     */
    className?: string;

    /**
     * 自定义内联样式
     */
    style?: React.CSSProperties;

    /**
     * 自动上传
     */
    autoUpload?: boolean;

    /**
     * 透传给Progress props
     */
    progressProps?: ProgressProps;

    /**
     * 是否为预览态
     */
    isPreview?: boolean;

    /**
     * 预览态模式下渲染的内容
     */
    renderPreview?: (value: number) => void;

    /**
     * 文件对象的 key name
     */
    fileKeyName?: string;
    /**
     * 点击文件名时触发 onPreview
     * @version 1.24
     */
    previewOnFileName?: boolean,
}

export default class Upload extends React.Component<UploadProps, any> {
    static Card: typeof Card;
    static Dragger: typeof Dragger;
    static Selecter: typeof Selecter;
    static Uploader: typeof Uploader;
}