如何等待所有上传的文件和文件夹被读取答案

【问题标题】：How to wait for all uploaded files and folders are read如何等待所有上传的文件和文件夹被读取
【发布时间】：2022-06-23 14:05:04
【问题描述】：

这是我的代码：

  public dropFiles(event: DragEvent): void {
    event.preventDefault();

    if (!event.dataTransfer) {
      return;
    }

    const items: DataTransferItemList = event.dataTransfer.items;

    for (let i = 0; i < items.length; i++) {
      const item: FileSystemEntry | null = items[i].webkitGetAsEntry();
      if (item) {
        this.traverseFileTree(item);
      }
    }
  }

  public traverseFileTree(item: FileSystemEntry): void {
    if (item.isFile) {
      console.log(item.fullPath);
      return;
    }

    if (item.isDirectory) {
      const dirReader = (item as FileSystemDirectoryEntry).createReader();

      // readEntries callback function 
      // - can be run async or sync depending on the browser
      dirReader.readEntries((entries: FileSystemEntry[]): void => {
        for (const entry of entries) {
          this.traverseFileTree(entry);
        }
      }, (error: any): void => {});
    }
  }

例如，如果用户下一个上传怎么办：

'dir1' // dir1 has 3 files
1.txt

如何确定 traverseFileTree 何时完成？一种解决方案是使用像这里这样的计数器：https://github.com/georgipeltekov/ngx-file-drop/blob/master/src/ngx-file-drop/ngx-file-drop.component.ts#L225，但是还有更好的方法吗？

因为 traverseFileTree 是递归的，有没有简单的方法知道它的结尾？我们不知道目录中有多少文件，直到我们阅读它们

【问题讨论】：

标签： html asynchronous web file-upload

【解决方案1】：

我找到了一种带有计数器的解决方案：

  public dropFiles(event: DragEvent): void {
    event.preventDefault();

    if (!event.dataTransfer) {
      return;
    }

    const items: DataTransferItemList = event.dataTransfer.items;
    this.filesUploadedCounter = items.length; // files + folders count

    for (let i = 0; i < items.length; i++) {
      const item: FileSystemEntry | null = items[i].webkitGetAsEntry();
      if (item) {
        this.traverseFileTree(item);
      }
    }

    const intervalId: any = setInterval((): void => {
      if (this.filesUploadedCounter < 1) {
        clearInterval(intervalId);
      }
    }, 200);
  }

  public traverseFileTree(item: FileSystemEntry): void {
    if (item.isFile) {
      this.filesUploadedCounter--;
      return;
    }

    if (item.isDirectory) {
      const dirReader = (item as FileSystemDirectoryEntry).createReader();

      // readEntries callback function
      // - can be run async or sync depending on the browser
      dirReader.readEntries((entries: FileSystemEntry[]): void => {

        if (entries.length < 1) {
          // directory read but is empty
          this.filesUploadedCounter--;
        }
        else {
          // -1 because if was added as it is folder
          this.filesUploadedCounter--;

          // directory has n files or subfolders
          this.filesUploadedCounter += entries.length;
        }

        for (const entry of entries) {
          this.traverseFileTree(entry);
        }
      }, (error: any): void => {
      });
    }
  }

【讨论】：