fix: should filter files by accept when select dir (#302)

* fix: should filter files by accept when select dir

* chore: optimize code

* chore: optimize code

Author: kerm1it

src/AjaxUploader.tsx

@@ -33,7 +33,8 @@ class AjaxUploader extends Component<UploadProps> {
 
   onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { files } = e.target;
-    this.uploadFiles(files);
+    const acceptedFiles = [...files].filter((file: RcFile) => attrAccept(file, this.props.accept));
+    this.uploadFiles(acceptedFiles);
     this.reset();
   };
 
@@ -76,9 +77,9 @@ class AjaxUploader extends Component<UploadProps> {
         (_file: RcFile) => attrAccept(_file, this.props.accept),
       );
     } else {
-      let files = Array.prototype.slice
-        .call(e.dataTransfer.files)
-        .filter((file: RcFile) => attrAccept(file, this.props.accept));
+      let files = [...e.dataTransfer.files].filter((file: RcFile) =>
+        attrAccept(file, this.props.accept),
+      );
 
       if (multiple === false) {
         files = files.slice(0, 1);
@@ -97,7 +98,7 @@ class AjaxUploader extends Component<UploadProps> {
     this.abort();
   }
 
-  uploadFiles = (files: FileList) => {
+  uploadFiles = (files: File[]) => {
     const originFiles = [...files] as RcFile[];
     const postFiles = originFiles.map((file: RcFile & { uid?: string }) => {
       // eslint-disable-next-line no-param-reassign

tests/uploader.spec.js

@@ -393,6 +393,22 @@ describe('uploader', () => {
         done();
       }, 100);
     });
+
+    it('unaccepted type files to upload will not trigger onStart when select directory', done => {
+      const input = uploader.find('input').first();
+      const files = [
+        {
+          name: 'unaccepted.webp',
+        },
+      ];
+      input.simulate('change', { target: { files } });
+      const mockStart = jest.fn();
+      handlers.onStart = mockStart;
+      setTimeout(() => {
+        expect(mockStart.mock.calls.length).toBe(0);
+        done();
+      }, 100);
+    });
   });
 
   describe('transform file before request', () => {