From 27020cb211bd3f4676286a118798c373176c37cc Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Sat, 3 Feb 2024 20:11:11 +0900
Subject: [PATCH] fix over 100 file drop

---
 .../admin/custom-emojis-grid.register.vue     | 47 +++++++++++++------
 packages/frontend/src/scripts/file-drop.ts    | 18 +++++--
 2 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
index a13a625d63..623b18c3b7 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
@@ -72,6 +72,7 @@
 
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
+import * as Misskey from 'misskey-js';
 import { onMounted, ref } from 'vue';
 import { misskeyApi } from '@/scripts/misskey-api.js';
 import { fromDriveFile, GridItem, RegisterLogItem } from '@/pages/admin/custom-emojis-grid.impl.js';
@@ -96,7 +97,7 @@ import {
 	GridRowContextMenuEvent,
 } from '@/components/grid/grid-event.js';
 import { ColumnSetting } from '@/components/grid/column.js';
-import { extractDroppedItems, flattenDroppedFiles } from '@/scripts/file-drop.js';
+import { DroppedFile, extractDroppedItems, flattenDroppedFiles } from '@/scripts/file-drop.js';
 import { optInGridUtils } from '@/components/grid/optin-utils.js';
 import XRegisterLogs from '@/pages/admin/custom-emojis-grid.register.logs.vue';
 
@@ -212,21 +213,35 @@ async function onClearClicked() {
 }
 
 async function onDrop(ev: DragEvent) {
-	const droppedFiles = await extractDroppedItems(ev).then(it => flattenDroppedFiles(it));
-	const uploadedItems = await Promise.all(
-		droppedFiles.map(async (it) => ({
-			droppedFile: it,
-			driveFile: await os.promiseDialog(
-				uploadFile(
-					it.file,
-					selectedFolderId.value,
-					it.file.name.replace(/\.[^.]+$/, ''),
-					keepOriginalUploading.value,
+	isDragOver.value = false;
+
+	const uploadedItems = Array.of<{ droppedFile: DroppedFile, driveFile: Misskey.entities.DriveFile }>();
+	try {
+		const droppedFiles = await extractDroppedItems(ev).then(it => flattenDroppedFiles(it));
+		uploadedItems.push(
+			...await os.promiseDialog(
+				Promise.all(
+					droppedFiles.map(async (it) => ({
+						droppedFile: it,
+						driveFile: await uploadFile(
+							it.file,
+							selectedFolderId.value,
+							it.file.name.replace(/\.[^.]+$/, ''),
+							keepOriginalUploading.value,
+						),
+					}),
+					),
 				),
+				() => {
+				},
+				() => {
+				},
 			),
-		}),
-		),
-	);
+		);
+	} catch (err: any) {
+		// ダイアログは共通部品側で出ているはずなので何もしない
+		return;
+	}
 
 	const items = uploadedItems.map(({ droppedFile, driveFile }) => {
 		const item = fromDriveFile(driveFile);
@@ -323,7 +338,9 @@ function onGridCellContextMenu(event: GridCellContextMenuEvent, currentState: Gr
 
 function onGridCellValueChange(event: GridCellValueChangeEvent, currentState: GridCurrentState) {
 	const { row, column, newValue } = event;
-	gridItems.value[row.index][column.setting.bindTo] = newValue;
+	if (gridItems.value.length > row.index && column.setting.bindTo in gridItems.value[row.index]) {
+		gridItems.value[row.index][column.setting.bindTo] = newValue;
+	}
 }
 
 function onGridKeyDown(event: GridKeyDownEvent, currentState: GridCurrentState) {
diff --git a/packages/frontend/src/scripts/file-drop.ts b/packages/frontend/src/scripts/file-drop.ts
index b3d6c79ad7..b3f316b68d 100644
--- a/packages/frontend/src/scripts/file-drop.ts
+++ b/packages/frontend/src/scripts/file-drop.ts
@@ -76,11 +76,18 @@ export async function readDataTransferItems(itemList: DataTransferItemList): Pro
 	}
 
 	function readDirectory(fileSystemDirectoryEntry: FileSystemDirectoryEntry): Promise<DroppedItem[]> {
-		return new Promise((resolve, reject) => {
-			fileSystemDirectoryEntry.createReader().readEntries(
-				async (entries) => resolve(await Promise.all(entries.map(readEntry))),
-				reject,
-			);
+		return new Promise(async (resolve, reject) => {
+			const allEntries = Array.of<FileSystemEntry>();
+			const reader = fileSystemDirectoryEntry.createReader();
+			while (true) {
+				const entries = await new Promise<FileSystemEntry[]>((res, rej) => reader.readEntries(res, rej));
+				if (entries.length === 0) {
+					break;
+				}
+				allEntries.push(...entries);
+			}
+
+			resolve(await Promise.all(allEntries.map(readEntry)));
 		});
 	}
 
@@ -102,6 +109,7 @@ export async function readDataTransferItems(itemList: DataTransferItemList): Pro
  * {@link DroppedItem}のリストからディレクトリを再帰的に検索し、ファイルのリストを取得する。
  */
 export function flattenDroppedFiles(items: DroppedItem[]): DroppedFile[] {
+	console.log(items);
 	const result = Array.of<DroppedFile>();
 	for (const item of items) {
 		if (item.isFile) {