add file type validator

js/upload/utils.ts

@@ -1,12 +1,21 @@
 import { SizeUnit } from './types';
 import log from '../log/log';
 
-export const IMAGE_REGEXP = /(.png|.jpg|.jpeg|.webp|.avif|.svg|.gif|.bmp)/i;
+export const IMAGE_REGEXP = /(.png|.jpg|.jpeg|.jpe|.webp|.avif|.svg|.gif|.bmp)/i;
+export const IMAGE_ALL_REGEXP = /(.png|.jpg|.jpeg|.jpe|.webp|.avif|.svg|.gif|.bmp|.dwg|.dxf|.svf|.tif|.tiff|.arw)/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_EXCEL_REGEXP = /(.xlsx|.xls|.csv|.xlc|.xlm|.xlt|.xlw)/i;
+export const FILE_WORD_REGEXP = /(.dox|docx|.document|.wps|.wdb|.msword)/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;
+export const VIDEO_REGEXP = /(.avi|.mp4|.wmv|.mpg|.mpeg|.mov|.rm|.ram|.swf|.flv|.rmvb|.flash|.mid|.3gp)/i;
+export const AUDIO_REGEXP = /(.mp2|.mp3|.mp4|.ogg|.3gpp|.ac3|.au)/i;
+
+const INPUT_FILE_MAP = {
+  'audio/*': AUDIO_REGEXP,
+  'video/*': VIDEO_REGEXP,
+  'image/*': IMAGE_ALL_REGEXP,
+  '.doc': /(.doc|.msword)/,
+};
 
 /**
  * 各个单位和 KB 的关系
@@ -167,11 +176,27 @@ export function getFileUrlByFileRaw(fileRaw: File): Promise<string> {
   });
 }
 
+export function validateFileType(accept: string, fileType: string, fileName?: string) {
+  const tmpFileType = fileType || fileName;
+  if (!accept) return true;
+  const acceptList = accept.split(',').map((v) => v.trim());
+  for (let i = 0, len = acceptList.length; i < len; i++) {
+    const oneRule = acceptList[i];
+    if (INPUT_FILE_MAP[oneRule] && INPUT_FILE_MAP[oneRule].test(tmpFileType)) {
+      return true;
+    }
+    const regExp = new RegExp(oneRule, 'i');
+    if (regExp.test(tmpFileType)) {
+      return true;
+    }
+  }
+  return false;
+}
+
 export function getFileList(files: FileList, accept: string = '') {
   const fileList: File[] = [];
   for (let i = 0; i < files.length; i++) {
-    const regExp = new RegExp(accept);
-    if (regExp.test(files[i].type)) {
+    if (validateFileType(accept, files[i].type, files[i].name)) {
       fileList.push(files[i]);
     }
   }

style/web/_global.less

@@ -30,3 +30,8 @@
     }
   }
 }
+
+.@{prefix}-slide-down-enter-active,
+.@{prefix}-slide-down-leave-active {
+  transition: height @anim-duration-base @anim-time-fn-easing;
+}

style/web/components/collapse/_index.less

@@ -122,8 +122,3 @@
     }
   }
 }
-
-.@{prefix}-slide-down-enter-active,
-.@{prefix}-slide-down-leave-active {
-  transition: height @anim-duration-base, padding @anim-duration-base;
-}

style/web/components/menu/_index.less

@@ -299,19 +299,19 @@ a.@{prefix}-menu__item {
 
   .@{prefix}-menu__sub {
     padding: 0;
-    max-height: 0;
     overflow: hidden;
-    transition: max-height @anim-duration-base @anim-time-fn-easing;
-
-    &.@{prefix}-is-opened {
-      max-height: calc(100vh - @menu-height-default * 2);
-    }
 
     .@{prefix}-menu__item {
       padding-left: var(--padding-left, 32px);
     }
   }
 
+  .@{prefix}-slide-down-enter-active {
+    .@{prefix}-menu__sub {
+      height: 100%;
+    }
+  }
+
   .@{prefix}-menu__item {
     position: relative;
     margin: @comp-margin-xs 0;

test/unit/upload/utils.test.js

@@ -0,0 +1,39 @@
+import { validateFileType } from '../../../js/upload/utils';
+
+describe('validateFileType', () => {
+  it('image/* test', () => {
+    expect(validateFileType('image/*', 'image/jpeg')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/jpg')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/png')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/webp')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/avif')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/svg')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/gif')).toBeTruthy();
+    expect(validateFileType('image/*', 'image/bmp')).toBeTruthy();
+    expect(validateFileType('image/*', 'DSC08672.ARW')).toBeTruthy();
+  });
+
+  it('video/* test', () => {
+    expect(validateFileType('video/*', 'test.mp4')).toBeTruthy();
+    expect(validateFileType('video/*', 'test.avi')).toBeTruthy();
+    expect(validateFileType('video/*', 'test.mov')).toBeTruthy();
+  });
+
+  it('audio/* test', () => {
+    expect(validateFileType('audio/*', 'test.mp4')).toBeTruthy();
+    expect(validateFileType('audio/*', 'test.mp3')).toBeTruthy();
+    expect(validateFileType('audio/*', 'test.mp2')).toBeTruthy();
+    expect(validateFileType('audio/*', 'test.au')).toBeTruthy();
+    expect(validateFileType('audio/*', 'test.ogg')).toBeTruthy();
+    expect(validateFileType('audio/*', 'test.3gpp')).toBeTruthy();
+  });
+
+  it('.docx, .doc, .zip test', () => {
+    expect(validateFileType('.docx, .doc, .zip', 'application/zip')).toBeTruthy();
+    expect(validateFileType('.docx,.doc,.zip', 'application/doc')).toBeTruthy();
+    expect(validateFileType('.docx,.doc,.zip', 'application/msword')).toBeTruthy();
+    expect(validateFileType('.docx,.doc,.zip', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document')).toBeTruthy();
+    expect(validateFileType('.docx,.doc,.zip', 'application/docx')).toBeTruthy();
+    expect(validateFileType('.docx,.doc,.zip', 'application/jpg')).toBeFalsy();
+  });
+});