fix(frontend): ユーザに表示されるファイル種別と、実際のファイル種別が異なり、ファイルをアップロードすることに失敗することがある問題を修正

Fix #16091

6 files changed, 33 insertions, 16 deletions

diff --git a/locales/index.d.ts b/locales/index.d.ts
index b3f5ff4938..b6b69f3ebe 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -7753,6 +7753,10 @@ export interface Locale extends ILocale {
              * MIMEタイプを指定します。改行で区切って複数指定できるほか、アスタリスク(*)でワイルドカード指定できます。(例: image/*)
              */
             "uploadableFileTypes_caption": string;
+            /**
+             * ファイルによっては種別を判定できないことがあります。そのようなファイルを許可する場合は {x} を指定に追加してください。
+             */
+            "uploadableFileTypes_caption2": ParameterizedString<"x">;
         };
         "_condition": {
             /**
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 44e6af61c7..a4081b1bf9 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -2007,6 +2007,7 @@ _role:
     chatAvailability: "チャットを許可"
     uploadableFileTypes: "アップロード可能なファイル種別"
     uploadableFileTypes_caption: "MIMEタイプを指定します。改行で区切って複数指定できるほか、アスタリスク(*)でワイルドカード指定できます。(例: image/*)"
+    uploadableFileTypes_caption2: "ファイルによっては種別を判定できないことがあります。そのようなファイルを許可する場合は {x} を指定に追加してください。"
   _condition:
     roleAssignedTo: "マニュアルロールにアサイン済み"
     isLocal: "ローカルユーザー"
diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue
index 4c928c7f6a..3f5f0776a8 100644
--- a/packages/frontend/src/components/MkUploaderDialog.vue
+++ b/packages/frontend/src/components/MkUploaderDialog.vue
@@ -73,7 +73,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</MkSelect>
 
 			<div>{{ i18n.tsx._uploader.maxFileSizeIsX({ x: $i.policies.maxFileSizeMb + 'MB' }) }}</div>
-			<div>{{ i18n.ts._uploader.allowedTypes }}: {{ $i.policies.uploadableFileTypes.join(', ') }}</div>
+
+			<!-- クライアントで検出するMIME typeとサーバーで検出するMIME typeが異なる場合があり、混乱の元になるのでとりあえず隠しとく -->
+			<!-- https://github.com/misskey-dev/misskey/issues/16091 -->
+			<!--<div>{{ i18n.ts._uploader.allowedTypes }}: {{ $i.policies.uploadableFileTypes.join(', ') }}</div>-->
 		</div>
 	</div>
 
diff --git a/packages/frontend/src/pages/admin/roles.editor.vue b/packages/frontend/src/pages/admin/roles.editor.vue
index 5da969b835..24c3160fdd 100644
--- a/packages/frontend/src/pages/admin/roles.editor.vue
+++ b/packages/frontend/src/pages/admin/roles.editor.vue
@@ -418,7 +418,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #label>{{ i18n.ts._role.useBaseValue }}</template>
 					</MkSwitch>
 					<MkTextarea :modelValue="role.policies.uploadableFileTypes.value.join('\n')" :disabled="role.policies.uploadableFileTypes.useDefault" :readonly="readonly" @update:modelValue="role.policies.uploadableFileTypes.value = $event.split('\n')">
-						<template #caption>{{ i18n.ts._role._options.uploadableFileTypes_caption }}</template>
+						<template #caption>
+							<div>{{ i18n.ts._role._options.uploadableFileTypes_caption }}</div>
+							<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.tsx._role._options.uploadableFileTypes_caption2({ x: 'application/octet-stream' }) }}</div>
+						</template>
 					</MkTextarea>
 					<MkRange v-model="role.policies.uploadableFileTypes.priority" :min="0" :max="2" :step="1" easing :textConverter="(v) => v === 0 ? i18n.ts._role._priority.low : v === 1 ? i18n.ts._role._priority.middle : v === 2 ? i18n.ts._role._priority.high : ''">
 						<template #label>{{ i18n.ts._role.priority }}</template>
diff --git a/packages/frontend/src/pages/admin/roles.vue b/packages/frontend/src/pages/admin/roles.vue
index c70ae12851..ef6e25685d 100644
--- a/packages/frontend/src/pages/admin/roles.vue
+++ b/packages/frontend/src/pages/admin/roles.vue
@@ -150,6 +150,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<template #label>{{ i18n.ts._role._options.uploadableFileTypes }}</template>
 						<template #suffix>...</template>
 						<MkTextarea :modelValue="policies.uploadableFileTypes.join('\n')">
+							<template #caption>
+								<div>{{ i18n.ts._role._options.uploadableFileTypes_caption }}</div>
+								<div><i class="ti ti-alert-triangle" style="color: var(--MI_THEME-warn);"></i> {{ i18n.tsx._role._options.uploadableFileTypes_caption2({ x: 'application/octet-stream' }) }}</div>
+							</template>
 						</MkTextarea>
 					</MkFolder>
 
diff --git a/packages/frontend/src/utility/drive.ts b/packages/frontend/src/utility/drive.ts
index de473c9b11..f171a4d14d 100644
--- a/packages/frontend/src/utility/drive.ts
+++ b/packages/frontend/src/utility/drive.ts
@@ -39,20 +39,22 @@ export function uploadFile(file: File | Blob, options: {
 	const filePromise = new Promise<Misskey.entities.DriveFile>((resolve, reject) => {
 		if ($i == null) return reject();
 
-		const allowedMimeTypes = $i.policies.uploadableFileTypes;
-		const isAllowedMimeType = allowedMimeTypes.some(mimeType => {
-			if (mimeType === '*' || mimeType === '*/*') return true;
-			if (mimeType.endsWith('/*')) return file.type.startsWith(mimeType.slice(0, -1));
-			return file.type === mimeType;
-		});
-		if (!isAllowedMimeType) {
-			os.alert({
-				type: 'error',
-				title: i18n.ts.failedToUpload,
-				text: i18n.ts.cannotUploadBecauseUnallowedFileType,
-			});
-			return reject();
-		}
+		// こっち側で検出するMIME typeとサーバーで検出するMIME typeは異なる場合があるため、こっち側ではやらないことにする
+		// https://github.com/misskey-dev/misskey/issues/16091
+		//const allowedMimeTypes = $i.policies.uploadableFileTypes;
+		//const isAllowedMimeType = allowedMimeTypes.some(mimeType => {
+		//	if (mimeType === '*' || mimeType === '*/*') return true;
+		//	if (mimeType.endsWith('/*')) return file.type.startsWith(mimeType.slice(0, -1));
+		//	return file.type === mimeType;
+		//});
+		//if (!isAllowedMimeType) {
+		//	os.alert({
+		//		type: 'error',
+		//		title: i18n.ts.failedToUpload,
+		//		text: i18n.ts.cannotUploadBecauseUnallowedFileType,
+		//	});
+		//	return reject();
+		//}
 
 		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
 			os.alert({