From d453196c9f9cfdb7b40a894752fe5bb805716c3a Mon Sep 17 00:00:00 2001
From: samunohito <46447427+samunohito@users.noreply.github.com>
Date: Tue, 30 Jan 2024 19:25:41 +0900
Subject: [PATCH] support choose pc file and drive file

---
 .../admin/custom-emojis-grid.register.vue     | 34 +++++++++++++++++--
 packages/frontend/src/scripts/select-file.ts  | 20 +++++++++--
 2 files changed, 49 insertions(+), 5 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 1117715d6a..ecb8bd457b 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-grid.register.vue
@@ -46,7 +46,14 @@
 		@dragover.prevent
 		@drop.prevent.stop="onDrop"
 	>
-		ここに絵文字の画像ファイルをドラッグ＆ドロップするとドライブにアップロードされます。
+		<div style="margin-top: 1em">
+			いずれかの方法で登録する絵文字を選択してください。
+		</div>
+		<ul>
+			<li>この枠にディレクトリまたは画像ファイルをドラッグ＆ドロップ</li>
+			<li><a @click="onFileSelectClicked">このリンクをクリックしてPCから選択する</a></li>
+			<li><a @click="onDriveSelectClicked">このリンクをクリックしてドライブから選択する</a></li>
+		</ul>
 	</div>
 
 	<div
@@ -91,6 +98,7 @@ import MkFolder from '@/components/MkFolder.vue';
 import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { required, ValidateViolation } from '@/components/grid/cell-validators.js';
+import { chooseFileFromDrive, chooseFileFromPc } from '@/scripts/select-file.js';
 
 type FolderItem = {
 	id?: string;
@@ -243,6 +251,26 @@ async function onDrop(ev: DragEvent) {
 	}
 }
 
+async function onFileSelectClicked(ev: MouseEvent) {
+	ev.preventDefault();
+	const driveFiles = await chooseFileFromPc(
+		true,
+		{
+			uploadFolder: selectedFolderId.value,
+			keepOriginal: keepOriginalUploading.value,
+			// 拡張子は消す
+			nameConverter: (file) => file.name.replace(/\.[a-zA-Z0-9]+$/, ''),
+		},
+	);
+	gridItems.value.push(...driveFiles.map(GridItem.fromDriveFile));
+}
+
+async function onDriveSelectClicked(ev: MouseEvent) {
+	ev.preventDefault();
+	const driveFiles = await chooseFileFromDrive(true);
+	gridItems.value.push(...driveFiles.map(GridItem.fromDriveFile));
+}
+
 function onRowDeleting(rows: GridRow[]) {
 	const deletedIndexes = rows.map(it => it.index);
 	gridItems.value = gridItems.value.filter((_, index) => !deletedIndexes.includes(index));
@@ -270,13 +298,15 @@ onMounted(async () => {
 <style module lang="scss">
 .uploadBox {
 	display: flex;
+	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	width: 100%;
-	height: 120px;
+	height: auto;
 	border: 0.5px dotted var(--accentedBg);
 	border-radius: var(--border-radius);
 	background-color: var(--accentedBg);
+	box-sizing: border-box;
 }
 
 .buttons {
diff --git a/packages/frontend/src/scripts/select-file.ts b/packages/frontend/src/scripts/select-file.ts
index f6977eb1fb..ee48d24e8e 100644
--- a/packages/frontend/src/scripts/select-file.ts
+++ b/packages/frontend/src/scripts/select-file.ts
@@ -12,14 +12,28 @@ import { i18n } from '@/i18n.js';
 import { defaultStore } from '@/store.js';
 import { uploadFile } from '@/scripts/upload.js';
 
-export function chooseFileFromPc(multiple: boolean, keepOriginal = false): Promise<Misskey.entities.DriveFile[]> {
+export function chooseFileFromPc(
+	multiple: boolean,
+	options?: {
+		uploadFolder?: string | null;
+		keepOriginal?: boolean;
+		nameConverter?: (file: File) => string | undefined;
+	},
+): Promise<Misskey.entities.DriveFile[]> {
+	const uploadFolder = options?.uploadFolder ?? defaultStore.state.uploadFolder;
+	const keepOriginal = options?.keepOriginal ?? defaultStore.state.keepOriginalUploading;
+	const nameConverter = options?.nameConverter ?? (() => undefined);
+
 	return new Promise((res, rej) => {
 		const input = document.createElement('input');
 		input.type = 'file';
 		input.multiple = multiple;
 		input.onchange = () => {
 			if (!input.files) return res([]);
-			const promises = Array.from(input.files, file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal));
+			const promises = Array.from(
+				input.files,
+				file => uploadFile(file, uploadFolder, nameConverter(file), keepOriginal),
+			);
 
 			Promise.all(promises).then(driveFiles => {
 				res(driveFiles);
@@ -94,7 +108,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Miss
 		}, {
 			text: i18n.ts.upload,
 			icon: 'ti ti-upload',
-			action: () => chooseFileFromPc(multiple, keepOriginal.value).then(files => res(files)),
+			action: () => chooseFileFromPc(multiple, { keepOriginal: keepOriginal.value }).then(files => res(files)),
 		}, {
 			text: i18n.ts.fromDrive,
 			icon: 'ti ti-cloud',