fix(frontend): ドライブへの画像アップロード時にファイル名の変更が無視される不具合を修正 (#17302)

* ドライブの実ファイル名ではなく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

@@ -6,6 +6,7 @@
 ### Client
 - Enhance: チャンネル指定リノートでリノート先のチャンネルに移動できるように
 - Fix: 一部のページ内リンクが正しく動作しない問題を修正
+- Fix: ドライブへの画像アップロード時にファイル名の変更が無視される不具合を修正
 - Fix: 連合が無効化されたサーバーで一部の設定項目が空欄で表示される問題を修正
 
 ### Server

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';

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);