From 32d4c312ef14844952ba3fa5a93d67f1de9e9827 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Wed, 25 Jun 2025 10:49:58 +0900
Subject: [PATCH] =?UTF-8?q?enhance(frontend):=20=E3=83=95=E3=82=A1?=
 =?UTF-8?q?=E3=82=A4=E3=83=AB=E3=82=A2=E3=83=83=E3=83=97=E3=83=AD=E3=83=BC?=
 =?UTF-8?q?=E3=83=89=E5=89=8D=E3=81=AB=E3=82=AD=E3=83=A3=E3=83=97=E3=82=B7?=
 =?UTF-8?q?=E3=83=A7=E3=83=B3=E8=A8=AD=E5=AE=9A=E3=82=92=E8=A1=8C=E3=81=88?=
 =?UTF-8?q?=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Resolve #16210
---
 CHANGELOG.md                                    |  1 +
 .../src/components/MkFileCaptionEditWindow.vue  |  8 ++++----
 .../frontend/src/composables/use-uploader.ts    | 17 +++++++++++++++++
 packages/frontend/src/utility/drive.ts          |  2 ++
 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;
 };
 
@@ -193,6 +194,21 @@ export function useUploader(options: {
 					get: () => item.isSensitive ?? false,
 					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);