fix(upload): in directory drag mode with a lot of files, some of the …

…files are not read, closes #5099
tusen-ai · Dec 19, 2023 · 655231d · 655231d
1 parent 2af346a
commit 655231d
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 42 deletions.
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
@@ -11,6 +11,7 @@
 - Fix `n-carousel` transition effect incorrect when using the `slide` effect in loop mode with only two elements, closes [#4323](https://github.com/tusen-ai/naive-ui/issues/4323).
 - Fix `n-carousel` trigger incorrect `current-index` value on arrow button click with single image, closes [#5130](https://github.com/tusen-ai/naive-ui/issues/5130).
 - Fix `n-input` autofill's default background color, closes [#5123](https://github.com/tusen-ai/naive-ui/issues/5123).
+- Fix `n-upload-trigger` in directory drag mode with a lot of files, some of the files are not read.
 
 ### Features
 

diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
@@ -11,6 +11,7 @@
 - 修复 `n-carousel` 在只有两个元素时，过渡效果为 `slide` 且循环播放时过渡效果有问题，关闭 [#4323](https://github.com/tusen-ai/naive-ui/issues/4323)
 - 修复 `n-carousel` 在只有一张图片时点击箭头切换按钮触发的 `current-index` 值不正确，关闭 [#5130](https://github.com/tusen-ai/naive-ui/issues/5130)
 - 修复 `n-input` 自动填充时的默认背景色，关闭 [#5123](https://github.com/tusen-ai/naive-ui/issues/5123)
+- 修复 `n-upload-trigger` 在拖拽文件夹场景下当文件夹内文件较多时，部分文件不会被正确读取的问题
 
 ### Features
 

diff --git a/src/upload/src/utils.ts b/src/upload/src/utils.ts
@@ -65,54 +65,35 @@ export async function getFilesFromEntries (
   directory: boolean
 ): Promise<FileAndEntry[]> {
   const fileAndEntries: FileAndEntry[] = []
-  let _resolve: (fileAndEntries: FileAndEntry[]) => void
-  let requestCallbackCount = 0
-  function lock (): void {
-    requestCallbackCount++
-  }
-  function unlock (): void {
-    requestCallbackCount--
-    if (!requestCallbackCount) {
-      _resolve(fileAndEntries)
-    }
-  }
-  function _getFilesFromEntries (
+
+  async function _getFilesFromEntries (
     entries: readonly FileSystemEntry[] | Array<FileSystemEntry | null>
-  ): void {
-    entries.forEach((entry) => {
-      if (!entry) return
-      lock()
+  ): Promise<void> {
+    for (const entry of entries) {
+      if (!entry) continue
       if (directory && isFileSystemDirectoryEntry(entry)) {
         const directoryReader = entry.createReader()
-        lock()
-        directoryReader.readEntries(
-          (entries) => {
-            _getFilesFromEntries(entries)
-            unlock()
-          },
-          () => {
-            unlock()
-          }
-        )
+        try {
+          const entries = await new Promise<readonly FileSystemEntry[]>(
+            (resolve, reject) => {
+              directoryReader.readEntries(resolve, reject)
+            }
+          )
+          await _getFilesFromEntries(entries)
+        } catch {}
       } else if (isFileSystemFileEntry(entry)) {
-        lock()
-        entry.file(
-          (file) => {
-            fileAndEntries.push({ file, entry, source: 'dnd' })
-            unlock()
-          },
-          () => {
-            unlock()
-          }
-        )
+        try {
+          const file = await new Promise<File>((resolve, reject) => {
+            entry.file(resolve, reject)
+          })
+          fileAndEntries.push({ file, entry, source: 'dnd' })
+        } catch {}
       }
-      unlock()
-    })
+    }
   }
-  await new Promise<FileAndEntry[]>((resolve) => {
-    _resolve = resolve
-    _getFilesFromEntries(entries)
-  })
+
+  await _getFilesFromEntries(entries)
+
   return fileAndEntries
 }