🎉 feat(#60): ignore chrome's file limit per dropped directory.

Author: hackingharold

projects/cdk/src/lib/dropzone/dropzone.service.ts

@@ -34,30 +34,62 @@ export class DropzoneService {
     return item.webkitGetAsEntry() || item.getAsFile();
   }
 
-  private _getFilesFromEntry(entry: FileSystemEntry | File): Promise<File[]> {
-    return new Promise<File[]>((resolve) => {
-      if (entry instanceof File) {
-        return resolve([entry]);
-      }
+  private async _getFilesFromEntry(entry: FileSystemEntry | File): Promise<File[]> {
+    if (entry instanceof File) {
+      return [entry];
+    }
 
-      if (this._isFile(entry)) {
-        return entry.file((f) => resolve([f]));
-      }
+    if (this._isFile(entry)) {
+      const file = await this._readFilePromise(entry);
+      return [file];
+    }
+
+    if (this._isDirectory(entry)) {
+      const entries = await this._readDirectoryWithoutLimit(entry);
+      const children = entries.map((e) => this._getFilesFromEntry(e));
 
-      if (this._isDirectory(entry)) {
-        const reader = entry.createReader();
+      const files = await Promise.all(children);
+      return this._flattenFiles(files);
+    }
+
+    return [];
+  }
 
-        reader.readEntries(async (entries) => {
-          const children = entries.map((e) => this._getFilesFromEntry(e));
-          const files = await Promise.all(children);
+  /**
+   * In Chrome >= 77, the `readEntries` method returns only 100 files.
+   * To achieve a consistent behavior across browsers and not restrict user interaction,
+   * we break the limit by recursively calling `readEntries`.
+   */
+  private async _readDirectoryWithoutLimit(entry: FileSystemDirectoryEntry): Promise<FileSystemEntry[]> {
+    const reader = entry.createReader();
+    let entries: FileSystemEntry[] = [];
 
-          return resolve(this._flattenFiles(files));
-        });
+    const readEntries = async () => {
+      const children = await this._readDirectoryPromise(reader);
+
+      if (children.length) {
+        entries = entries.concat(children);
+        await readEntries();
       }
-    });
+    };
+
+    await readEntries();
+    return entries;
   }
 
   private _isFile = (item: FileSystemEntry): item is FileSystemFileEntry => item.isFile;
   private _isDirectory = (item: FileSystemEntry): item is FileSystemDirectoryEntry => item.isDirectory;
   private _flattenFiles = (files: File[][]) => ([] as File[]).concat(...files);
+
+  private _readFilePromise(entry: FileSystemFileEntry) {
+    return new Promise<File>((resolve) => {
+      entry.file((file) => resolve(file));
+    });
+  }
+
+  private _readDirectoryPromise(reader: FileSystemDirectoryReader) {
+    return new Promise<FileSystemEntry[]>((resolve) => {
+      reader.readEntries((entries) => resolve(entries));
+    });
+  }
 }