Skip to content

Commit

Permalink
feat(upload): support fileListDisplay for file list upload (#1704)
Browse files Browse the repository at this point in the history
  • Loading branch information
@chaishi
chaishi committed Oct 31, 2022
1 parent b52d069 commit 814d7ba
Show file tree
Hide file tree
Showing 5 changed files with 34 additions and 22 deletions.
4 changes: 2 additions & 2 deletions src/upload/props.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -190,9 +190,9 @@ export default {
onDragleave: Function as PropType<TdUploadProps['onDragleave']>,
/** 拖拽结束时触发 */
onDrop: Function as PropType<TdUploadProps['onDrop']>,
/** 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构 */
/** 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response` */
onFail: Function as PropType<TdUploadProps['onFail']>,
/** 单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次 */
/** 多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发 */
onOneFileFail: Function as PropType<TdUploadProps['onOneFileFail']>,
/** 单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据 */
onOneFileSuccess: Function as PropType<TdUploadProps['onOneFileSuccess']>,
Expand Down
16 changes: 11 additions & 5 deletions src/upload/themes/multiple-flow-list.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { CreateElement } from 'vue';
import {
computed, defineComponent, toRefs, PropType,
h, computed, defineComponent, toRefs, PropType,
} from '@vue/composition-api';
import classNames from 'classnames';
import {
Expand All @@ -15,7 +15,7 @@ import ImageViewer from '../../image-viewer';
import { CommonDisplayFileProps } from '../interface';
import { commonProps } from '../constants';
import TButton from '../../button';
import { UploadFile, TdUploadProps } from '../type';
import { UploadFile, TdUploadProps, UploadDisplayDragEvents } from '../type';
import useDrag, { UploadDragEvents } from '../hooks/useDrag';
import { abridgeName, returnFileSize } from '../../_common/js/upload/utils';
import TLoading from '../../loading';
Expand Down Expand Up @@ -65,7 +65,7 @@ export default defineComponent({
return locale.value.triggerUploadText.normal;
});

const innerDragEvents = computed(() => {
const innerDragEvents = computed<UploadDisplayDragEvents>(() => {
const draggable = props.draggable === undefined ? true : props.draggable;
return draggable
? {
Expand Down Expand Up @@ -217,13 +217,19 @@ export default defineComponent({
},

renderFileList() {
if (this.fileListDisplay) {
return this.fileListDisplay(h, {
files: this.displayFiles,
dragEvents: this.innerDragEvents,
});
}
return (
<table class={`${this.uploadPrefix}__flow-table`} on={this.innerDragEvents}>
<thead>
<tr>
<th>{this.locale.file?.fileNameText}</th>
<th>{this.locale.file?.fileSizeText}</th>
<th>{this.locale.file?.fileStatusText}</th>
<th style={{ width: '120px' }}>{this.locale.file?.fileSizeText}</th>
<th style={{ width: '120px' }}>{this.locale.file?.fileStatusText}</th>
{this.disabled ? null : <th>{this.locale.file?.fileOperationText}</th>}
</tr>
</thead>
Expand Down
16 changes: 11 additions & 5 deletions src/upload/type.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,21 +51,20 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
default?: string | TNode;
/**
* 是否禁用
* @default false
*/
disabled?: boolean;
/**
* 用于自定义拖拽区域
*/
dragContent?: TNode<TriggerContext>;
dragContent?: TNode | TNode<TriggerContext>;
/**
* 是否启用拖拽上传，不同的组件风格默认值不同
*/
draggable?: boolean;
/**
* 用于完全自定义文件列表内容
*/
fileListDisplay?: TNode<{ files: UploadFile[] }>;
fileListDisplay?: TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>;
/**
* 已上传文件列表，同 `value`
* @default []
Expand Down Expand Up @@ -207,11 +206,11 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
*/
onDrop?: (context: { e: DragEvent }) => void;
/**
* 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构
* 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`
*/
onFail?: (options: UploadFailContext) => void;
/**
* 单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次
* 多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发
*/
onOneFileFail?: (options: UploadFailContext) => void;
/**
Expand Down Expand Up @@ -311,6 +310,13 @@ export interface UploadFile {
url?: string;
}

export interface UploadDisplayDragEvents {
drop?: (event: DragEvent) => void;
dragenter?: (event: DragEvent) => void;
dragover?: (event: DragEvent) => void;
dragleave?: (event: DragEvent) => void;
}

export type ResponseType = { error?: string; url?: string } & Record<string, any>;

export interface FormatResponseContext {
Expand Down
6 changes: 3 additions & 3 deletions src/upload/upload.en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ beforeAllFilesUpload | Function | - | before all files upload, return false can
beforeUpload | Function | - | Typescript：`(file: UploadFile) => boolean \| Promise<boolean>` | N
data | Object | - | Typescript：`Record<string, any> \| ((file: File) => Record<string, any>)` | N
default | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | \- | N
dragContent | String / Slot / Function | - | drag content。Typescript：`TNode<TriggerContext>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | - | \- | N
dragContent | String / Slot / Function | - | drag content。Typescript：`TNode \| TNode<TriggerContext>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
draggable | Boolean | undefined | \- | N
fileListDisplay | Slot / Function | - | Typescript：`TNode<{ files: UploadFile[] }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
fileListDisplay | Slot / Function | - | Typescript：`TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>` `interface UploadDisplayDragEvents { drop?: (event: DragEvent) => void; dragenter?: (event: DragEvent) => void; dragover?: (event: DragEvent) => void; dragleave?: (event: DragEvent) => void; }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
files | Array | [] | `.sync` is supported。Typescript：`Array<T>` | N
defaultFiles | Array | [] | uncontrolled property。Typescript：`Array<T>` | N
format | Function | - | Typescript：`(file: File) => UploadFile` | N
Expand Down
14 changes: 7 additions & 7 deletions src/upload/upload.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@ beforeAllFilesUpload | Function | - | 全部文件上传之前的钩子，参数
beforeUpload | Function | - | 单文件上传之前的钩子，参数为上传的文件，返回值决定是否继续上传，若返回值为 `false` 则终止上传。TS 类型：`(file: UploadFile) => boolean \| Promise<boolean>` | N
data | Object | - | 上传文件时所需的额外数据。TS 类型：`Record<string, any> \| ((file: File) => Record<string, any>)` | N
default | String / Slot / Function | - | 非拖拽场景，指触发上传的元素，如：“选择文件”。如果是拖拽场景，则是指拖拽区域。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | false | 是否禁用 | N
dragContent | String / Slot / Function | - | 用于自定义拖拽区域。TS 类型：`TNode<TriggerContext>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
disabled | Boolean | - | 是否禁用 | N
dragContent | String / Slot / Function | - | 用于自定义拖拽区域。TS 类型：`TNode \| TNode<TriggerContext>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
draggable | Boolean | undefined | 是否启用拖拽上传，不同的组件风格默认值不同 | N
fileListDisplay | Slot / Function | - | 用于完全自定义文件列表内容。TS 类型：`TNode<{ files: UploadFile[] }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
fileListDisplay | Slot / Function | - | 用于完全自定义文件列表内容。TS 类型：`TNode<{ files: UploadFile[]; dragEvents?: UploadDisplayDragEvents }>` `interface UploadDisplayDragEvents { drop?: (event: DragEvent) => void; dragenter?: (event: DragEvent) => void; dragover?: (event: DragEvent) => void; dragleave?: (event: DragEvent) => void; }`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
files | Array | [] | 已上传文件列表，同 `value`。支持语法糖 `.sync`。TS 类型：`Array<T>` | N
defaultFiles | Array | [] | 已上传文件列表，同 `value`。非受控属性。TS 类型：`Array<T>` | N
format | Function | - | 文件上传前转换文件的数据结构，可新增或修改文件对象的属性。TS 类型：`(file: File) => UploadFile` | N
Expand Down Expand Up @@ -49,8 +49,8 @@ onChange | Function | | TS 类型：`(value: Array<T>, context: UploadChangeCon
onDragenter | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>进入拖拽区域时触发 | N
onDragleave | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>离开拖拽区域时触发 | N
onDrop | Function | | TS 类型：`(context: { e: DragEvent }) => void`<br/>拖拽结束时触发 | N
onFail | Function | | TS 类型：`(options: UploadFailContext) => void`<br/>上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile }`<br/> | N
onOneFileFail | Function | | TS 类型：`(options: UploadFailContext) => void`<br/>单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次 | N
onFail | Function | | TS 类型：`(options: UploadFailContext) => void`<br/>上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile }`<br/> | N
onOneFileFail | Function | | TS 类型：`(options: UploadFailContext) => void`<br/>多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发 | N
onOneFileSuccess | Function | | TS 类型：`(context: Pick<SuccessContext, 'e' \| 'file' \| 'response'>) => void`<br/>单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据 | N
onPreview | Function | | TS 类型：`(options: { file: UploadFile; index: number; e: MouseEvent }) => void`<br/>点击图片预览时触发，文件没有预览 | N
onProgress | Function | | TS 类型：`(options: ProgressContext) => void`<br/>上传进度变化时触发，真实进度和模拟进度都会触发。`type=real` 表示真实上传进度，`type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType }`<br/><br/>`type UploadProgressType = 'real' \| 'mock'`<br/> | N
Expand All @@ -69,8 +69,8 @@ change | `(value: Array<T>, context: UploadChangeContext)` | 已上传文件列
dragenter | `(context: { e: DragEvent })` | 进入拖拽区域时触发
dragleave | `(context: { e: DragEvent })` | 离开拖拽区域时触发
drop | `(context: { e: DragEvent })` | 拖拽结束时触发
fail | `(options: UploadFailContext)` | 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile }`<br/>
one-file-fail | `(options: UploadFailContext)` | 单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次
fail | `(options: UploadFailContext)` | 上传失败后触发。`response` 指接口响应结果，`response.error` 会作为错误文本提醒。如果希望判定为上传失败，但接口响应数据不包含 `error` 字段，可以使用 `formatResponse` 格式化 `response` 数据结构。如果是多文件多请求上传场景，请到事件 `onOneFileFail` 中查看 `response`。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface UploadFailContext { e: ProgressEvent; failedFiles: UploadFile[]; currentFiles: UploadFile[]; response?: any; file: UploadFile }`<br/>
one-file-fail | `(options: UploadFailContext)` | 多文件/图片场景下，单个文件上传失败后触发，如果一个请求上传一个文件，则会触发多次。单文件/图片不会触发
one-file-success | `(context: Pick<SuccessContext, 'e' \| 'file' \| 'response'>)` | 单个文件上传成功后触发，在多文件场景下会触发多次。`context.file` 表示当前上传成功的单个文件，`context.response` 表示上传请求的返回数据
preview | `(options: { file: UploadFile; index: number; e: MouseEvent })` | 点击图片预览时触发，文件没有预览
progress | `(options: ProgressContext)` | 上传进度变化时触发，真实进度和模拟进度都会触发。`type=real` 表示真实上传进度，`type=mock` 表示模拟上传进度。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts)。<br/>`interface ProgressContext { e?: ProgressEvent; file?: UploadFile; currentFiles: UploadFile[]; percent: number; type: UploadProgressType }`<br/><br/>`type UploadProgressType = 'real' \| 'mock'`<br/>
Expand Down

0 comments on commit 814d7ba

Please sign in to comment.