From 68e3476a16716c52ff36c376bc86a0c2d615f9e8 Mon Sep 17 00:00:00 2001
From: FINEARCHS <133759614+FineArchs@users.noreply.github.com>
Date: Sat, 11 Apr 2026 14:23:42 +0900
Subject: [PATCH] =?UTF-8?q?fix(frontend):=20=E3=83=89=E3=83=A9=E3=82=A4?=
 =?UTF-8?q?=E3=83=96=E3=81=B8=E3=81=AE=E7=94=BB=E5=83=8F=E3=82=A2=E3=83=83?=
 =?UTF-8?q?=E3=83=97=E3=83=AD=E3=83=BC=E3=83=89=E6=99=82=E3=81=AB=E3=83=95?=
 =?UTF-8?q?=E3=82=A1=E3=82=A4=E3=83=AB=E5=90=8D=E3=81=AE=E5=A4=89=E6=9B=B4?=
 =?UTF-8?q?=E3=81=8C=E7=84=A1=E8=A6=96=E3=81=95=E3=82=8C=E3=82=8B=E4=B8=8D?=
 =?UTF-8?q?=E5=85=B7=E5=90=88=E3=82=92=E4=BF=AE=E6=AD=A3=20(#17302)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ドライブの実ファイル名ではなくsuffixを保持するように

* MkUploaderItemsでファイル名が圧縮後の拡張子も含めて表示されるように

* Apply suggestion from @kakkokari-gtyih

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>

* changelog

---------

Co-authored-by: かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
---
 CHANGELOG.md                                    |  1 +
 .../frontend/src/components/MkUploaderItems.vue |  6 +++++-
 .../frontend/src/composables/use-uploader.ts    | 17 +++++++++++------
 3 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5d98325588..406f5ba606 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,6 +6,7 @@
 ### Client
 - Enhance: チャンネル指定リノートでリノート先のチャンネルに移動できるように
 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
+- Fix: ドライブへの画像アップロード時にファイル名の変更が無視される不具合を修正
 - Fix: 連合が無効化されたサーバーで一部の設定項目が空欄で表示される問題を修正
 
 ### Server
diff --git a/packages/frontend/src/components/MkUploaderItems.vue b/packages/frontend/src/components/MkUploaderItems.vue
index 51f7ac2d09..a196189c8b 100644
--- a/packages/frontend/src/components/MkUploaderItems.vue
+++ b/packages/frontend/src/components/MkUploaderItems.vue
@@ -24,7 +24,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div :class="$style.itemBody">
 				<div>
 					<i v-if="item.isSensitive" style="color: var(--MI_THEME-warn); margin-right: 0.5em;" class="ti ti-eye-exclamation"></i>
-					<MkCondensedLine :minScale="2 / 3">{{ item.name }}</MkCondensedLine>
+					<MkCondensedLine :minScale="2 / 3">
+						<span>{{ getUploadName(item).lastIndexOf('.') != -1 ? getUploadName(item).substring(0, getUploadName(item).lastIndexOf('.')) : getUploadName(item) }}</span>
+						<span v-if="getUploadName(item).lastIndexOf('.') != -1" style="opacity: 0.5;">{{ getUploadName(item).substring(getUploadName(item).lastIndexOf('.')) }}</span>
+					</MkCondensedLine>
 				</div>
 				<div :class="$style.itemInfo">
 					<span>{{ item.file.type }}</span>
@@ -47,6 +50,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 <script lang="ts" setup>
 import { isLink } from '@@/js/is-link.js';
+import { getUploadName } from '@/composables/use-uploader.js';
 import type { UploaderItem } from '@/composables/use-uploader.js';
 import { i18n } from '@/i18n.js';
 import MkButton from '@/components/MkButton.vue';
diff --git a/packages/frontend/src/composables/use-uploader.ts b/packages/frontend/src/composables/use-uploader.ts
index fabc04895e..ccb9b44f9c 100644
--- a/packages/frontend/src/composables/use-uploader.ts
+++ b/packages/frontend/src/composables/use-uploader.ts
@@ -61,7 +61,7 @@ const mimeTypeMap = {
 export type UploaderItem = {
 	id: string;
 	name: string;
-	uploadName?: string;
+	suffix: string;
 	progress: { max: number; value: number } | null;
 	thumbnail: string | null;
 	preprocessing: boolean;
@@ -83,6 +83,10 @@ export type UploaderItem = {
 	abortPreprocess?: (() => void) | null;
 };
 
+export function getUploadName(item: UploaderItem): string {
+	return item.name + (item.name.endsWith(item.suffix) ? '' : item.suffix);
+}
+
 function getCompressionSettings(level: 0 | 1 | 2 | 3) {
 	if (level === 1) {
 		return {
@@ -132,6 +136,7 @@ export function useUploader(options: {
 		items.value.push({
 			id,
 			name: prefer.s.keepOriginalFilename ? filename : id + extension,
+			suffix: '',
 			progress: null,
 			thumbnail: THUMBNAIL_SUPPORTED_TYPES.includes(file.type) ? window.URL.createObjectURL(file) : null,
 			preprocessing: false,
@@ -503,7 +508,7 @@ export function useUploader(options: {
 		item.uploading = true;
 
 		const { filePromise, abort } = uploadFile(item.preprocessedFile ?? item.file, {
-			name: item.uploadName ?? item.name,
+			name: getUploadName(item),
 			folderId: options.folderId === undefined ? prefer.s.uploadFolder : options.folderId,
 			isSensitive: item.isSensitive ?? false,
 			caption: item.caption ?? null,
@@ -677,14 +682,14 @@ export function useUploader(options: {
 					// (and WebP is not browser safe yet)
 					preprocessedFile = result;
 					item.compressedSize = result.size;
-					item.uploadName = preprocessedFile.type !== config.mimeType ? `${item.name}.${mimeTypeMap[config.mimeType]}` : item.name;
+					item.suffix = '.' + mimeTypeMap[config.mimeType];
 				}
 			} catch (err) {
 				console.error('Failed to resize image', err);
 			}
 		} else {
 			item.compressedSize = null;
-			item.uploadName = item.name;
+			item.suffix = '';
 		}
 
 		imageBitmap.close();
@@ -743,10 +748,10 @@ export function useUploader(options: {
 
 			preprocessedFile = new Blob([output.target.buffer!], { type: output.format.mimeType });
 			item.compressedSize = output.target.buffer!.byteLength;
-			item.uploadName = `${item.name}.mp4`;
+			item.suffix = '.mp4';
 		} else {
 			item.compressedSize = null;
-			item.uploadName = item.name;
+			item.suffix = '';
 		}
 
 		if (item.thumbnail != null) URL.revokeObjectURL(item.thumbnail);