enhance(frontend): ファイルアップロード前にキャプション設定を行えるように

Resolve #16210

4 files changed, 24 insertions, 4 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 62d95bce3a..96a263b115 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,7 @@
 
 ### Client
 - Enhance: 設定の自動バックアップをオンにした直後に自動バックアップするように
+- Enhance: ファイルアップロード前にキャプション設定を行えるように
 
 ### Server
 -
diff --git a/packages/frontend/src/components/MkFileCaptionEditWindow.vue b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
index c9b08b616c..e1cd694079 100644
--- a/packages/frontend/src/components/MkFileCaptionEditWindow.vue
+++ b/packages/frontend/src/components/MkFileCaptionEditWindow.vue
@@ -16,7 +16,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 >
 	<template #header>{{ i18n.ts.describeFile }}</template>
 	<div class="_spacer" style="--MI_SPACER-min: 20px; --MI_SPACER-max: 28px;">
-		<MkDriveFileThumbnail :file="file" fit="contain" style="height: 100px; margin-bottom: 16px;"/>
+		<MkDriveFileThumbnail v-if="file" :file="file" fit="contain" style="height: 100px; margin-bottom: 16px;"/>
 		<MkTextarea v-model="caption" autofocus :placeholder="i18n.ts.inputNewDescription">
 			<template #label>{{ i18n.ts.caption }}</template>
 		</MkTextarea>
@@ -33,8 +33,8 @@ import MkDriveFileThumbnail from '@/components/MkDriveFileThumbnail.vue';
 import { i18n } from '@/i18n.js';
 
 const props = defineProps<{
-	file: Misskey.entities.DriveFile;
-	default: string;
+	file?: Misskey.entities.DriveFile | null;
+	default?: string | null;
 }>();
 
 const emit = defineEmits<{
@@ -44,7 +44,7 @@ const emit = defineEmits<{
 
 const dialog = useTemplateRef('dialog');
 
-const caption = ref(props.default);
+const caption = ref(props.default ?? '');
 
 async function ok() {
 	emit('done', caption.value);
diff --git a/packages/frontend/src/composables/use-uploader.ts b/packages/frontend/src/composables/use-uploader.ts
index aadbc9eb41..65a2ac161f 100644
--- a/packages/frontend/src/composables/use-uploader.ts
+++ b/packages/frontend/src/composables/use-uploader.ts
@@ -82,6 +82,7 @@ export type UploaderItem = {
 	file: File;
 	watermarkPresetId: string | null;
 	isSensitive?: boolean;
+	caption?: string | null;
 	abort?: (() => void) | null;
 };
 
@@ -194,6 +195,21 @@ export function useUploader(options: {
 					set: (value) => item.isSensitive = value,
 				}),
 			}, {
+				text: i18n.ts.describeFile,
+				icon: 'ti ti-text-caption',
+				action: async () => {
+					const { dispose } = await os.popupAsyncWithDialog(import('@/components/MkFileCaptionEditWindow.vue').then(x => x.default), {
+						default: item.caption ?? null,
+					}, {
+						done: caption => {
+							if (caption != null) {
+								item.caption = caption.trim().length === 0 ? null : caption;
+							}
+						},
+						closed: () => dispose(),
+					});
+				},
+			}, {
 				type: 'divider',
 			});
 		}
@@ -408,6 +424,7 @@ export function useUploader(options: {
 			name: item.uploadName ?? item.name,
 			folderId: options.folderId,
 			isSensitive: item.isSensitive ?? false,
+			caption: item.caption ?? null,
 			onProgress: (progress) => {
 				if (item.progress == null) {
 					item.progress = { max: progress.total, value: progress.loaded };
diff --git a/packages/frontend/src/utility/drive.ts b/packages/frontend/src/utility/drive.ts
index 1912b3f805..47876259a9 100644
--- a/packages/frontend/src/utility/drive.ts
+++ b/packages/frontend/src/utility/drive.ts
@@ -33,6 +33,7 @@ export function uploadFile(file: File | Blob, options: {
 	name?: string;
 	folderId?: string | null;
 	isSensitive?: boolean;
+	caption?: string | null;
 	onProgress?: (ctx: { total: number; loaded: number; }) => void;
 } = {}): UploadReturnType {
 	const xhr = new XMLHttpRequest();
@@ -142,6 +143,7 @@ export function uploadFile(file: File | Blob, options: {
 		formData.append('file', file);
 		formData.append('name', options.name ?? (file instanceof File ? file.name : 'untitled'));
 		formData.append('isSensitive', options.isSensitive ? 'true' : 'false');
+		if (options.caption != null) formData.append('comment', options.caption);
 		if (options.folderId) formData.append('folderId', options.folderId);
 
 		xhr.send(formData);