fix: recursively read folder entries because most browsers only retur…

…n the first 100 entries
Bagaar · Aug 20, 2024 · fa3d8a1 · fa3d8a1
1 parent a2faaac
commit fa3d8a1
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 12 deletions.
diff --git a/ember-file-upload/src/system/data-transfer-wrapper.ts b/ember-file-upload/src/system/data-transfer-wrapper.ts
@@ -19,7 +19,9 @@ const readEntry = (entry: FileSystemEntry): Promise<File | void> => {
         resolve(fileEntry);
       });
     } else {
-      console.warn(`The dropped directory contains a subdirectory ${entry.fullPath}, the contents of this will be skipped.`);
+      console.warn(
+        `The dropped directory contains a subdirectory ${entry.fullPath}, the contents of this will be skipped.`,
+      );
       resolve();
     }
   });
@@ -43,14 +45,33 @@ const readAllFilesInDirectory = (item: DataTransferItem): Promise<File[]> =>
       reject('Could not read directory');
     }
 
-    entry?.createReader()?.readEntries(async (entries: FileSystemEntry[]) => {
-      const readFiles: (File | void)[] = await Promise.all(entries.map(readEntry))
-      .catch(
-        (err) => {
-          console.error(err)
-          throw err;
-        },
-      );
+    const reader = entry?.createReader();
+    if (!reader) {
+      reject('Could not read directory');
+    }
+    const entries: FileSystemEntry[] = [];
+    const read = () =>
+      new Promise<void>((resolve, reject) => {
+        const readChunk = () => {
+          reader.readEntries((newEntries: FileSystemEntry[]) => {
+            if (newEntries.length > 0) {
+              entries.push(...newEntries);
+              readChunk();
+            } else {
+              resolve();
+            }
+          }, reject);
+        };
+        readChunk();
+      });
+
+    read().then(async () => {
+      const readFiles: (File | void)[] = await Promise.all(
+        entries.map(readEntry),
+      ).catch((err) => {
+        console.error(err);
+        throw err;
+      });
       resolve(readFiles.filter(Boolean) as File[]);
     });
   });

diff --git a/ember-file-upload/src/test-support.ts b/ember-file-upload/src/test-support.ts
@@ -126,7 +126,8 @@ export async function dragAndDropDirectory(
       name: folderName,
       createReader: () => ({
         readEntries: (callback: (entries: FileSystemEntryStub[]) => void) => {
-          const entryFiles = filesInDirectory.map((file) => {
+          const readingFiles = filesInDirectory.splice(0, 2);
+          const entryFiles = readingFiles.map((file) => {
             return {
               isFile: true,
               file: (callback: (file: File | Blob) => void) => {

diff --git a/test-app/tests/unit/system/data-transfer-wrapper-test.js b/test-app/tests/unit/system/data-transfer-wrapper-test.js
@@ -62,9 +62,17 @@ module('Unit | DataTransferWrapper', function (hooks) {
           name: 'zoey.png',
           type: 'image/png',
         },
+        {
+          name: 'tomster.jpg',
+          type: 'image/jpeg',
+        },
+        {
+          name: 'zoey.png',
+          type: 'image/png',
+        },
       ],
     };
-    assert.strictEqual(this.subject.filesOrItems.length, 2);
+    assert.strictEqual(this.subject.filesOrItems.length, 4);
   });
 
   test('directory dropped', async function (assert) {
@@ -85,7 +93,8 @@ module('Unit | DataTransferWrapper', function (hooks) {
       isDirectory: true,
       createReader: () => ({
         readEntries: (callback) => {
-          const entryFiles = filesInDirectory.map((file) => {
+          const readingFiles = filesInDirectory.splice(0, 2)
+          const entryFiles = readingFiles.map((file) => {
             return {
               isFile: true,
               file: (callback) => {