feat(web): add file thumbnail style (#1541)

* feat(web): add file thumbnail css * feat(Upload): add common fileType regExp --------- Co-authored-by: sheepluo <sheepluo@tencent.com>
Tencent · Jul 24, 2023 · 81196dc · 81196dc
1 parent 23f2fcb
commit 81196dc
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/js/upload/main.ts b/js/upload/main.ts
@@ -237,6 +237,20 @@ export function uploadOneRequest(params: HandleUploadParams): Promise<UploadRequ
   });
 }
 
+function updateUploadedFiles(uploadFiles: UploadFile[], resultFiles: UploadFile[]) {
+  const existFiles = uploadFiles.filter((t) => t.url);
+  const newFiles = existFiles;
+  for (let i = 0, len = resultFiles.length; i < len; i++) {
+    const file = resultFiles[i];
+    const index = uploadFiles.findIndex((item) => (
+      (item.raw && item.raw === file.raw) || (item.name && item.name === file.name)
+    ));
+    const tmpFile = index >= 0 ? { ...uploadFiles[index], ...file } : file;
+    newFiles.push(tmpFile);
+  }
+  return newFiles;
+}
+
 /**
  * 可能单个文件上传，也可能批量文件一次性上传
  * 返回上传成功或上传失败的文件列表
@@ -255,7 +269,7 @@ Promise<UploadRequestReturn> {
         if (r.status === 'success') {
           r.data.files = isBatchUpload || !params.multiple
             ? r.data.files
-            : uploadedFiles.concat(r.data.files);
+            : updateUploadedFiles(uploadedFiles, r.data.files);
         }
         const failedFiles = r.status === 'fail' ? r.data.files : [];
         resolve({ ...r, failedFiles });

diff --git a/js/upload/utils.ts b/js/upload/utils.ts
@@ -1,6 +1,13 @@
 import { SizeUnit } from './types';
 import log from '../log/log';
 
+export const IMAGE_REGEXP = /(.png|.jpg|.jpeg|.webp|.avif|.svg|.gif|.bmp)/i;
+export const FILE_PDF_REGEXP = /(.pdf)/i;
+export const FILE_EXCEL_REGEXP = /(.xlsx|.xls|.csv)/i;
+export const FILE_WORD_REGEXP = /(.dox|docx|.document)/i;
+export const FILE_PPT_REGEXP = /(.ppt|.pptx|.key)/i;
+export const VIDEO_REGEXP = /(.avi|.mp3|.mp4|.wmv|.mpg|.mpeg|.mov|.rm|.ram|.swf|.flv|.rmvb|.flash|.mid|.3gp)/i;
+
 /**
  * 各个单位和 KB 的关系
  *

diff --git a/style/web/components/upload/_index.less b/style/web/components/upload/_index.less
@@ -249,6 +249,7 @@
       color: @upload-card-mask-text-color;
       will-change: transform;
       opacity: 0;
+      z-index: @upload-z-index;
       .hover-transition(opacity);
       .horizontal-vertical-center-with-flex();
       .fill-with-position-absolute();
@@ -649,6 +650,21 @@
   .@{prefix}-upload__single-name {
     color: @upload-file-name-color;
   }
+
+  .@{prefix}-upload__file-thumbnail {
+    margin-right: @upload-list-item-inner-padding;
+    width: @upload-list-file-thumbnail-size;
+    height: @upload-list-file-thumbnail-size;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    cursor: pointer;
+
+    > svg {
+      font-size: @upload-list-file-thumbnail-icon;
+      color: @upload-icon-color;
+    }
+  }
 }
 
 .@{prefix}-upload__card-name {
@@ -662,3 +678,8 @@
 .@{prefix}-upload__dragger-btns > .@{prefix}-button {
   padding: 0;
 }
+
+.@{prefix}-upload__file-info {
+  display: flex;
+  align-items: center;
+}
diff --git a/style/web/components/upload/_var.less b/style/web/components/upload/_var.less
@@ -11,6 +11,9 @@
 // 如：@button-line-bg-color-hover
 // 如：@button-line-height-s
 
+// higher than image
+@upload-z-index: 2;
+
 // 颜色
 @upload-icon-check-circle-filled-color: @success-color;
 @upload-icon-error-circle-filled-color: @error-color;
@@ -62,6 +65,7 @@
 @upload-card-mask-opacity-disabled: .3;
 
 // 图标
+@upload-list-file-thumbnail-icon: @comp-size-s;
 @upload-list-file-icon-font-size: @comp-size-xl;
 @upload-card-item-icon-add-font-size: @comp-size-m;
 @upload-dragger-progress-icon-font-size: @comp-size-xxxs;
@@ -96,6 +100,7 @@
 @upload-icon-size-mini: calc(@font-size-base + 2px);
 @upload-icon-size: calc(@font-size-base + 2px);
 @upload-icon-size-large: @comp-size-xs;
+@upload-list-file-thumbnail-size: @comp-size-xxl;
 
 // 边框
 @upload-card-item-bg-border: 1px dashed @component-border;
@@ -119,6 +124,7 @@
 // 间距
 @upload-list-file-margin-right: @comp-margin-m;  //待删除
 @upload-list-item-padding: @comp-paddingTB-m @comp-paddingLR-m;  //?
+@upload-list-item-inner-padding: @comp-paddingLR-s;
 @upload-list-item-margin-top: @comp-margin-m; //?
 @upload-single-name-margin-right: @comp-margin-s;
 @upload-single-name-margin-bottom: @comp-margin-s;