feat(upload): uploadPastedFiles (#2966)

Tencent · Dec 9, 2023 · c87721b · c87721b
1 parent 369c88c
commit c87721b
Show file tree

Hide file tree

Showing 6 changed files with 24 additions and 6 deletions.
diff --git a/src/upload/hooks/useUpload.ts b/src/upload/hooks/useUpload.ts
@@ -399,8 +399,9 @@ export default function useUpload(props: TdUploadProps, context: SetupContext) {
     });
     uploading.value = false;
 
+    // autoUpload do not need to reset to waiting state
     if (autoUpload.value) {
-      toUploadFiles.value = toUploadFiles.value.map((item) => ({ ...item, status: 'waiting' }));
+      toUploadFiles.value = [];
     } else {
       setUploadValue(
         uploadValue.value.map((item) => {

diff --git a/src/upload/props.ts b/src/upload/props.ts
@@ -190,7 +190,10 @@ export default {
     type: [Object, Function] as PropType<TdUploadProps['uploadButton']>,
   },
   /** 是否允许粘贴上传剪贴板中的文件 */
-  uploadPastedFiles: Boolean,
+  uploadPastedFiles: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 */
   useMockProgress: {
     type: Boolean,

diff --git a/src/upload/type.ts b/src/upload/type.ts
@@ -203,7 +203,7 @@ export interface TdUploadProps<T extends UploadFile = UploadFile> {
     | TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>;
   /**
    * 是否允许粘贴上传剪贴板中的文件
-   * @default false
+   * @default true
    */
   uploadPastedFiles?: boolean;
   /**

diff --git a/src/upload/upload.en-US.md b/src/upload/upload.en-US.md
@@ -47,7 +47,7 @@ trigger | Slot / Function | - | trigger elements UI。Typescript：`TNode<Trigge
 triggerButtonProps | Object | - | trigger button props, it can be used to change color/size/href/... of the trigger button。Typescript：`ButtonProps`，[Button API Documents](./button?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
 uploadAllFilesInOneRequest | Boolean | false | uploading all files in one request | N
 uploadButton | Object / Slot / Function | - | upload button props, which showed on `autoUpload=false` and multiple files/images upload。Typescript：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-uploadPastedFiles | Boolean | false | allow to upload files in clipboard after pasting | N
+uploadPastedFiles | Boolean | true | allow to upload files in clipboard after pasting | N
 useMockProgress | Boolean | true | use mock progress, instead of real progress | N
 value | Array | [] | file list。`v-model` is supported。Typescript：`Array<T>` | N
 defaultValue | Array | [] | file list。uncontrolled property。Typescript：`Array<T>` | N

diff --git a/src/upload/upload.md b/src/upload/upload.md
@@ -47,7 +47,7 @@ trigger | Slot / Function | - | 触发上传的元素，`files` 指本次显示
 triggerButtonProps | Object | - | 透传选择按钮全部属性。TS 类型：`ButtonProps`，[Button API Documents](./button?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/upload/type.ts) | N
 uploadAllFilesInOneRequest | Boolean | false | 是否在同一个请求中上传全部文件，默认一个请求上传一个文件。多文件上传时有效 | N
 uploadButton | Object / Slot / Function | - | 批量文件/图片上传，`autoUpload=false` 场景下，透传“点击上传”按钮属性。TS 类型：`null \| ButtonProps \| TNode<{ disabled: boolean; uploading: boolean; uploadFiles: () => void; uploadText: string }>`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-uploadPastedFiles | Boolean | false | 是否允许粘贴上传剪贴板中的文件 | N
+uploadPastedFiles | Boolean | true | 是否允许粘贴上传剪贴板中的文件 | N
 useMockProgress | Boolean | true | 是否在请求时间超过 300ms 后显示模拟进度。上传进度有模拟进度和真实进度两种。一般大小的文件上传，真实的上传进度只有 0 和 100，不利于交互呈现，因此组件内置模拟上传进度。真实上传进度一般用于大文件上传。 | N
 value | Array | [] | 已上传文件列表，同 `files`。TS 类型：`UploadFile`。支持语法糖 `v-model`。TS 类型：`Array<T>` | N
 defaultValue | Array | [] | 已上传文件列表，同 `files`。TS 类型：`UploadFile`。非受控属性。TS 类型：`Array<T>` | N

diff --git a/src/upload/upload.tsx b/src/upload/upload.tsx
@@ -12,6 +12,9 @@ import { CommonDisplayFileProps, UploadProps } from './interface';
 import { UploadDragEvents } from './hooks/useDrag';
 import CustomFile from './themes/custom-file';
 import { renderContent, renderTNodeJSX } from '../utils/render-tnode';
+import { getFileList } from '../_common/js/upload/utils';
+import { formatToUploadFile } from '../_common/js/upload/main';
+import { UploadFile } from './type';
 
 export default defineComponent({
   name: 'TUpload',
@@ -88,8 +91,19 @@ export default defineComponent({
       },
     ]);
 
+    const onUploadPaste = (event: ClipboardEvent) => {
+      if (!props.uploadPastedFiles) return;
+      const validFiles: File[] = getFileList(event.clipboardData.files, props.accept);
+      if (!validFiles.length) return;
+      const status: UploadFile['status'] = props.autoUpload ? 'progress' : 'waiting';
+      const files = formatToUploadFile(validFiles, props.format, status);
+      toUploadFiles.value = files;
+      uploadData.uploadFiles();
+    };
+
     return {
       ...uploadData,
+      onUploadPaste,
       commonDisplayFileProps,
       dragProps,
       uploadClasses,
@@ -236,7 +250,7 @@ export default defineComponent({
 
   render() {
     return (
-      <div class={this.uploadClasses}>
+      <div class={this.uploadClasses} onPaste={this.onUploadPaste}>
         <input
           ref="inputRef"
           type="file"