fix:delay folder upload until all children files are parsed when drag

src/traverseFileTree.ts

@@ -10,33 +10,43 @@ interface InternalDataTransferItem extends DataTransferItem {
   path: string;
 }
 
-function loopFiles(item: InternalDataTransferItem, callback) {
-  const dirReader = item.createReader();
-  let fileList = [];
-
-  function sequence() {
-    dirReader.readEntries((entries: InternalDataTransferItem[]) => {
-      const entryList = Array.prototype.slice.apply(entries);
-      fileList = fileList.concat(entryList);
+const traverseFileTree = (files: InternalDataTransferItem[], callback, isAccepted) => {
+  const flattenFileList = [];
+  let progressFileList = [];
+  let wipIndex = 0;
+  files.forEach(file => progressFileList.push(file.webkitGetAsEntry() as any));
+  function loopFiles(item: InternalDataTransferItem) {
+    const dirReader = item.createReader();
+    let fileList = [];
 
-      // Check if all the file has been viewed
-      const isFinished = !entryList.length;
+    function sequence() {
+      dirReader.readEntries(
+        (entries: InternalDataTransferItem[]) => {
+          const entryList = Array.prototype.slice.apply(entries);
+          fileList = fileList.concat(entryList);
 
-      if (isFinished) {
-        callback(fileList);
-      } else {
-        sequence();
-      }
-    });
-  }
+          // Check if all the file has been viewed
+          const isFinished = !entryList.length;
 
-  sequence();
-}
+          if (isFinished) {
+            wipIndex++;
+            progressFileList = progressFileList.concat(fileList);
+          } else {
+            sequence();
+          }
+        },
+        () => {
+          wipIndex++;
+        },
+      );
+    }
 
-const traverseFileTree = (files: InternalDataTransferItem[], callback, isAccepted) => {
+    sequence();
+  }
   // eslint-disable-next-line @typescript-eslint/naming-convention
   const _traverseFileTree = (item: InternalDataTransferItem, path?: string) => {
     if (!item) {
+      wipIndex++;
       return;
     }
     // eslint-disable-next-line no-param-reassign
@@ -59,20 +69,24 @@ const traverseFileTree = (files: InternalDataTransferItem[], callback, isAccepte
               },
             });
           }
-          callback([file]);
+          flattenFileList.push(file);
         }
       });
+      wipIndex++;
     } else if (item.isDirectory) {
-      loopFiles(item, (entries: InternalDataTransferItem[]) => {
-        entries.forEach(entryItem => {
-          _traverseFileTree(entryItem, `${path}${item.name}/`);
-        });
-      });
+      loopFiles(item);
     }
   };
-  files.forEach(file => {
-    _traverseFileTree(file.webkitGetAsEntry() as any);
-  });
+
+  function walkFiles() {
+    while (wipIndex < progressFileList.length) {
+      _traverseFileTree(progressFileList[wipIndex]);
+      if (wipIndex === progressFileList.length) {
+        callback(flattenFileList);
+      }
+    }
+  }
+  walkFiles();
 };
 
 export default traverseFileTree;

tests/uploader.spec.tsx

@@ -25,7 +25,7 @@ const makeFileSystemEntry = item => {
       return {
         readEntries(handle) {
           if (!first) {
-            return [];
+            return handle([]);
           }
 
           first = false;
@@ -373,7 +373,54 @@ describe('uploader', () => {
     beforeEach(() => {
       uploader = render(<Upload {...props} />);
     });
+    it('beforeUpload should run after all children files are parsed', done => {
+      const props = { action: '/test', directory: true, accept: '.png' };
+      const mockBeforeUpload = jest.fn();
+      const beforeUpload = (file, fileList) => {
+        console.log('beforeUpload', file, fileList);
+        mockBeforeUpload(file, fileList);
+      };
+      const Test = () => {
+        return <Upload {...props} beforeUpload={beforeUpload} />;
+      };
 
+      const { container } = render(<Test />);
+      const files = {
+        name: 'foo',
+        children: [
+          {
+            name: 'bar',
+            children: [
+              {
+                name: '1.png',
+              },
+              {
+                name: '2.png',
+              },
+              {
+                name: 'rc',
+                children: [
+                  {
+                    name: '5.webp',
+                  },
+                  {
+                    name: '4.webp',
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+      };
+      const input = container.querySelector('input')!;
+      fireEvent.drop(input, { dataTransfer: { items: [makeDataTransferItem(files)] } });
+      setTimeout(() => {
+        expect(mockBeforeUpload.mock.calls.length).toBe(2);
+        expect(mockBeforeUpload.mock.calls[0][1].length).toBe(2);
+        expect(mockBeforeUpload.mock.calls[1][1].length).toBe(2);
+        done();
+      }, 100);
+    });
     it('unaccepted type files to upload will not trigger onStart', done => {
       const input = uploader.container.querySelector('input')!;
       const files = {