From 9d09d016bb63c3770a03b95b432c0dd0a6994b25 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 12 May 2025 16:48:56 +0900
Subject: [PATCH 1/9] wip

---
 locales/index.d.ts                            |   4 +
 locales/ja-JP.yml                             |   1 +
 .../src/components/MkCropperDialog.vue        |  18 +-
 packages/frontend/src/components/MkDrive.vue  |  10 +-
 .../frontend/src/components/MkModalWindow.vue |  36 +--
 .../src/components/MkUploadDialog.vue         | 237 ++++++++++++++++++
 packages/frontend/src/ui/_common_/common.vue  |   4 -
 packages/frontend/src/ui/_common_/upload.vue  | 134 ----------
 packages/frontend/src/utility/select-file.ts  |  24 +-
 packages/frontend/src/utility/upload.ts       | 162 ------------
 10 files changed, 274 insertions(+), 356 deletions(-)
 create mode 100644 packages/frontend/src/components/MkUploadDialog.vue
 delete mode 100644 packages/frontend/src/ui/_common_/upload.vue
 delete mode 100644 packages/frontend/src/utility/upload.ts

diff --git a/locales/index.d.ts b/locales/index.d.ts
index ed9d127a2e..1ec8b2da8b 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -1210,6 +1210,10 @@ export interface Locale extends ILocale {
      * アップロードが完了するまで時間がかかる場合があります。
      */
     "uploadFromUrlMayTakeTime": string;
+    /**
+     * {n}個のファイルをアップロード
+     */
+    "uploadNFiles": ParameterizedString<"n">;
     /**
      * みつける
      */
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index e318234087..34c9396c64 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -298,6 +298,7 @@ uploadFromUrl: "URLアップロード"
 uploadFromUrlDescription: "アップロードしたいファイルのURL"
 uploadFromUrlRequested: "アップロードをリクエストしました"
 uploadFromUrlMayTakeTime: "アップロードが完了するまで時間がかかる場合があります。"
+uploadNFiles: "{n}個のファイルをアップロード"
 explore: "みつける"
 messageRead: "既読"
 noMoreHistory: "これより過去の履歴はありません"
diff --git a/packages/frontend/src/components/MkCropperDialog.vue b/packages/frontend/src/components/MkCropperDialog.vue
index ba21394cbc..99854bc66e 100644
--- a/packages/frontend/src/components/MkCropperDialog.vue
+++ b/packages/frontend/src/components/MkCropperDialog.vue
@@ -15,18 +15,16 @@ SPDX-License-Identifier: AGPL-3.0-only
 	@closed="emit('closed')"
 >
 	<template #header>{{ i18n.ts.cropImage }}</template>
-	<template #default="{ width, height }">
-		<div class="mk-cropper-dialog" :style="`--vw: ${width}px; --vh: ${height}px;`">
-			<Transition name="fade">
-				<div v-if="loading" class="loading">
-					<MkLoading/>
-				</div>
-			</Transition>
-			<div class="container">
-				<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
+	<div class="mk-cropper-dialog" :style="`--vw: 100%; --vh: 100%;`">
+		<Transition name="fade">
+			<div v-if="loading" class="loading">
+				<MkLoading/>
 			</div>
+		</Transition>
+		<div class="container">
+			<img ref="imgEl" :src="imgUrl" style="display: none;" @load="onImageLoad">
 		</div>
-	</template>
+	</div>
 </MkModalWindow>
 </template>
 
diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index a1f76ac563..036ce1c807 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -111,7 +111,7 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
-import { uploadFile, uploads } from '@/utility/upload.js';
+import { uploadFile, uploa______ds } from '@/utility/upload.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
 import { chooseFileFromPc } from '@/utility/select-file.js';
@@ -145,7 +145,7 @@ const moreFolders = ref(false);
 const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]);
 const selectedFiles = ref<Misskey.entities.DriveFile[]>([]);
 const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]);
-const uploadings = uploads;
+const uploadings = uploa______ds;
 const connection = useStream().useChannel('drive');
 
 // ドロップされようとしているか
@@ -625,12 +625,6 @@ function getMenu() {
 	menu.push({
 		text: i18n.ts.addFile,
 		type: 'label',
-	}, {
-		text: i18n.ts.upload + ' (' + i18n.ts.compress + ')',
-		icon: 'ti ti-upload',
-		action: () => {
-			chooseFileFromPc(true, { uploadFolder: folder.value?.id, keepOriginal: false });
-		},
 	}, {
 		text: i18n.ts.upload,
 		icon: 'ti ti-upload',
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index 19989e375b..fb62e9e0cb 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -6,7 +6,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 <template>
 <MkModal ref="modal" :preferType="'dialog'" @click="onBgClick" @closed="emit('closed')" @esc="emit('esc')">
 	<div ref="rootEl" :class="$style.root" :style="{ width: `${width}px`, height: `min(${height}px, 100%)` }">
-		<div ref="headerEl" :class="$style.header">
+		<div :class="$style.header">
 			<button v-if="withOkButton && withCloseButton" :class="$style.headerButton" class="_button" @click="emit('close')"><i class="ti ti-x"></i></button>
 			<span :class="$style.title">
 				<slot name="header"></slot>
@@ -15,7 +15,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<button v-if="withOkButton" :class="$style.headerButton" class="_button" :disabled="okButtonDisabled" @click="emit('ok')"><i class="ti ti-check"></i></button>
 		</div>
 		<div :class="$style.body">
-			<slot :width="bodyWidth" :height="bodyHeight"></slot>
+			<slot></slot>
+		</div>
+		<div :class="$style.footer">
+			<slot name="footer"></slot>
 		</div>
 	</div>
 </MkModal>
@@ -48,10 +51,6 @@ const emit = defineEmits<{
 }>();
 
 const modal = useTemplateRef('modal');
-const rootEl = useTemplateRef('rootEl');
-const headerEl = useTemplateRef('headerEl');
-const bodyWidth = ref(0);
-const bodyHeight = ref(0);
 
 function close() {
 	modal.value?.close();
@@ -61,23 +60,6 @@ function onBgClick() {
 	emit('click');
 }
 
-const ro = new ResizeObserver((entries, observer) => {
-	if (rootEl.value == null || headerEl.value == null) return;
-	bodyWidth.value = rootEl.value.offsetWidth;
-	bodyHeight.value = rootEl.value.offsetHeight - headerEl.value.offsetHeight;
-});
-
-onMounted(() => {
-	if (rootEl.value == null || headerEl.value == null) return;
-	bodyWidth.value = rootEl.value.offsetWidth;
-	bodyHeight.value = rootEl.value.offsetHeight - headerEl.value.offsetHeight;
-	ro.observe(rootEl.value);
-});
-
-onUnmounted(() => {
-	ro.disconnect();
-});
-
 defineExpose({
 	close,
 });
@@ -146,4 +128,12 @@ defineExpose({
 	background: var(--MI_THEME-panel);
 	container-type: size;
 }
+
+.footer {
+	display: flex;
+	flex-shrink: 0;
+	background: var(--MI_THEME-windowHeader);
+	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
+	backdrop-filter: var(--MI-blur, blur(15px));
+}
 </style>
diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
new file mode 100644
index 0000000000..c8a48e8a3c
--- /dev/null
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -0,0 +1,237 @@
+<!--
+SPDX-FileCopyrightText: syuilo and misskey-project
+SPDX-License-Identifier: AGPL-3.0-only
+-->
+
+<template>
+<MkModalWindow
+	ref="dialog"
+	:width="800"
+	:height="500"
+	@click="cancel()"
+	@close="cancel()"
+	@closed="emit('closed')"
+>
+	<template #header>
+		{{ i18n.tsx.uploadNFiles({ n: files.length }) }}
+	</template>
+
+	<div>
+		<div :class="$style.items">
+			<div v-for="ctx in items" :key="ctx.id" :class="$style.item">
+				<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
+				<div class="top">
+					<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
+					<p class="status">
+						<span v-if="ctx.progressValue === null" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
+						<span v-if="ctx.progressValue !== null" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
+						<span v-if="ctx.progressValue !== null" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
+					</p>
+				</div>
+				<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === null, waiting: ctx.progressValue !== null && ctx.progressValue === ctx.progressMax }"></progress>
+			</div>
+		</div>
+	</div>
+
+	<template #footer>
+		<div>
+			<MkButton primary rounded @click="upload()">{{ i18n.ts.upload }}</MkButton>
+		</div>
+	</template>
+</MkModalWindow>
+</template>
+
+<script lang="ts" setup>
+import { markRaw, onMounted, ref, useTemplateRef } from 'vue';
+import * as Misskey from 'misskey-js';
+import { v4 as uuid } from 'uuid';
+import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
+import { getCompressionConfig } from '@/utility/upload/compress-config.js';
+import MkModalWindow from '@/components/MkModalWindow.vue';
+import { i18n } from '@/i18n.js';
+import { prefer } from '@/preferences.js';
+import { $i } from '@/i.js';
+import { instance } from '@/instance.js';
+import MkButton from '@/components/MkButton.vue';
+
+const mimeTypeMap = {
+	'image/webp': 'webp',
+	'image/jpeg': 'jpg',
+	'image/png': 'png',
+} as const;
+
+const props = withDefaults(defineProps<{
+	files: File[];
+	folderId?: string | null;
+}>(), {
+
+});
+
+const emit = defineEmits<{
+	(ev: 'done', driveFiles: Misskey.entities.DriveFile[]): void;
+	(ev: 'closed'): void;
+}>();
+
+const items = ref([] as {
+	id: string;
+	name: string;
+	progressMax: number | null;
+	progressValue: number | null;
+	thumbnail: string;
+	uploaded: Misskey.entities.DriveFile | null;
+	file: File;
+}[]);
+
+const dialog = useTemplateRef('dialog');
+
+function cancel() {
+	// TODO: アップロードを中止しますか？
+	dialog.value?.close();
+}
+
+function upload() {
+	for (const item of items.value) {
+		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
+			alert({
+				type: 'error',
+				title: i18n.ts.failedToUpload,
+				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+			});
+			return Promise.reject();
+		}
+
+		const reader = new FileReader();
+		reader.onload = async (): Promise<void> => {
+			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
+			let resizedImage: Blob | undefined;
+			if (config) {
+				try {
+					const resized = await readAndCompressImage(file, config);
+					if (resized.size < file.size || file.type === 'image/webp') {
+						// The compression may not always reduce the file size
+						// (and WebP is not browser safe yet)
+						resizedImage = resized;
+					}
+					if (_DEV_) {
+						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
+						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
+					}
+
+					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
+				} catch (err) {
+					console.error('Failed to resize image', err);
+				}
+			}
+
+			const formData = new FormData();
+			formData.append('i', $i!.token);
+			formData.append('force', 'true');
+			formData.append('file', resizedImage ?? file);
+			formData.append('name', ctx.name);
+			if (_folder) formData.append('folderId', _folder);
+
+			const xhr = new XMLHttpRequest();
+			xhr.open('POST', apiUrl + '/drive/files/create', true);
+			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
+				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
+					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
+					uploa______ds.value = uploa______ds.value.filter(x => x.id !== id);
+
+					if (xhr.status === 413) {
+						alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+						});
+					} else if (ev.target?.response) {
+						const res = JSON.parse(ev.target.response);
+						if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
+							alert({
+								type: 'error',
+								title: i18n.ts.failedToUpload,
+								text: i18n.ts.cannotUploadBecauseInappropriate,
+							});
+						} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
+							alert({
+								type: 'error',
+								title: i18n.ts.failedToUpload,
+								text: i18n.ts.cannotUploadBecauseNoFreeSpace,
+							});
+						} else {
+							alert({
+								type: 'error',
+								title: i18n.ts.failedToUpload,
+								text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
+							});
+						}
+					} else {
+						alert({
+							type: 'error',
+							title: 'Failed to upload',
+							text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
+						});
+					}
+
+					reject();
+					return;
+				}
+
+				const driveFile = JSON.parse(ev.target.response);
+
+				resolve(driveFile);
+
+				uploa______ds.value = uploa______ds.value.filter(x => x.id !== id);
+			}) as (ev: ProgressEvent<EventTarget>) => any;
+
+			xhr.upload.onprogress = ev => {
+				if (ev.lengthComputable) {
+					ctx.progressMax = ev.total;
+					ctx.progressValue = ev.loaded;
+				}
+			};
+
+			xhr.send(formData);
+		};
+		reader.readAsArrayBuffer(file);
+	}
+}
+
+onMounted(() => {
+	for (const file of props.files) {
+		const id = uuid();
+		const filename = file.name ?? 'untitled';
+		const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
+		items.value.push({
+			id,
+			name: prefer.s.keepOriginalFilename ? filename : id + extension,
+			progressMax: null,
+			progressValue: null,
+			thumbnail: window.URL.createObjectURL(file),
+			uploaded: null,
+			file: markRaw(file),
+		});
+	}
+});
+</script>
+
+<style lang="scss" module>
+.mk-uploader > ol > li > progress {
+  display: block;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  overflow: hidden;
+  grid-column: 2/3;
+  grid-row: 2/3;
+  z-index: 2;
+	width: 100%;
+	height: 8px;
+}
+.mk-uploader > ol > li > progress::-webkit-progress-value {
+  background: var(--MI_THEME-accent);
+}
+.mk-uploader > ol > li > progress::-webkit-progress-bar {
+  //background: var(--MI_THEME-accentAlpha01);
+	background: transparent;
+}
+</style>
diff --git a/packages/frontend/src/ui/_common_/common.vue b/packages/frontend/src/ui/_common_/common.vue
index fcf9fb234d..da20d23cfd 100644
--- a/packages/frontend/src/ui/_common_/common.vue
+++ b/packages/frontend/src/ui/_common_/common.vue
@@ -65,8 +65,6 @@ SPDX-License-Identifier: AGPL-3.0-only
 	v-on="popup.events"
 />
 
-<XUpload v-if="uploads.length > 0"/>
-
 <component
 	:is="prefer.s.animation ? TransitionGroup : 'div'"
 	tag="div"
@@ -105,7 +103,6 @@ import { swInject } from './sw-inject.js';
 import XNotification from './notification.vue';
 import { popups } from '@/os.js';
 import { pendingApiRequestsCount } from '@/utility/misskey-api.js';
-import { uploads } from '@/utility/upload.js';
 import * as sound from '@/utility/sound.js';
 import { $i } from '@/i.js';
 import { useStream } from '@/stream.js';
@@ -116,7 +113,6 @@ import { store } from '@/store.js';
 import XNavbar from '@/ui/_common_/navbar.vue';
 
 const XStreamIndicator = defineAsyncComponent(() => import('./stream-indicator.vue'));
-const XUpload = defineAsyncComponent(() => import('./upload.vue'));
 const XWidgets = defineAsyncComponent(() => import('./widgets.vue'));
 
 const drawerMenuShowing = defineModel<boolean>('drawerMenuShowing');
diff --git a/packages/frontend/src/ui/_common_/upload.vue b/packages/frontend/src/ui/_common_/upload.vue
deleted file mode 100644
index 3e5653e46d..0000000000
--- a/packages/frontend/src/ui/_common_/upload.vue
+++ /dev/null
@@ -1,134 +0,0 @@
-<!--
-SPDX-FileCopyrightText: syuilo and misskey-project
-SPDX-License-Identifier: AGPL-3.0-only
--->
-
-<template>
-<div class="mk-uploader _acrylic" :style="{ zIndex }">
-	<ol v-if="uploads.length > 0">
-		<li v-for="ctx in uploads" :key="ctx.id">
-			<div class="img" :style="{ backgroundImage: `url(${ ctx.img })` }"></div>
-			<div class="top">
-				<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
-				<p class="status">
-					<span v-if="ctx.progressValue === undefined" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-					<span v-if="ctx.progressValue !== undefined" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-					<span v-if="ctx.progressValue !== undefined" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-				</p>
-			</div>
-			<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === undefined, waiting: ctx.progressValue !== undefined && ctx.progressValue === ctx.progressMax }"></progress>
-		</li>
-	</ol>
-</div>
-</template>
-
-<script lang="ts" setup>
-import { } from 'vue';
-import * as os from '@/os.js';
-import { uploads } from '@/utility/upload.js';
-import { i18n } from '@/i18n.js';
-
-const zIndex = os.claimZIndex('high');
-</script>
-
-<style lang="scss" scoped>
-.mk-uploader {
-	position: fixed;
-	right: 16px;
-	width: 260px;
-	top: 32px;
-	padding: 16px 20px;
-	pointer-events: none;
-	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
-	border-radius: 8px;
-}
-.mk-uploader:empty {
-  display: none;
-}
-.mk-uploader > ol {
-  display: block;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.mk-uploader > ol > li {
-  display: grid;
-  margin: 8px 0 0 0;
-  padding: 0;
-  height: 36px;
-  width: 100%;
-  border-top: solid 8px transparent;
-  grid-template-columns: 36px calc(100% - 44px);
-  grid-template-rows: 1fr 8px;
-  column-gap: 8px;
-  box-sizing: content-box;
-}
-.mk-uploader > ol > li:first-child {
-  margin: 0;
-  box-shadow: none;
-  border-top: none;
-}
-.mk-uploader > ol > li > .img {
-  display: block;
-  background-size: cover;
-  background-position: center center;
-  grid-column: 1/2;
-  grid-row: 1/3;
-}
-.mk-uploader > ol > li > .top {
-  display: flex;
-  grid-column: 2/3;
-  grid-row: 1/2;
-}
-.mk-uploader > ol > li > .top > .name {
-  display: block;
-  padding: 0 8px 0 0;
-  margin: 0;
-  font-size: 0.8em;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  flex-shrink: 1;
-}
-.mk-uploader > ol > li > .top > .name > i {
-  margin-right: 4px;
-}
-.mk-uploader > ol > li > .top > .status {
-  display: block;
-  margin: 0 0 0 auto;
-  padding: 0;
-  font-size: 0.8em;
-  flex-shrink: 0;
-}
-.mk-uploader > ol > li > .top > .status > .initing {
-}
-.mk-uploader > ol > li > .top > .status > .kb {
-}
-.mk-uploader > ol > li > .top > .status > .percentage {
-  display: inline-block;
-  width: 48px;
-  text-align: right;
-}
-.mk-uploader > ol > li > .top > .status > .percentage:after {
-  content: '%';
-}
-.mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
-	width: 100%;
-	height: 8px;
-}
-.mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--MI_THEME-accent);
-}
-.mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--MI_THEME-accentAlpha01);
-	background: transparent;
-}
-</style>
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index 731ef58302..1d9fa8d3c3 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: AGPL-3.0-only
  */
 
-import { ref } from 'vue';
+import { defineAsyncComponent, markRaw, ref } from 'vue';
 import * as Misskey from 'misskey-js';
 import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
@@ -16,12 +16,10 @@ export function chooseFileFromPc(
 	multiple: boolean,
 	options?: {
 		uploadFolder?: string | null;
-		keepOriginal?: boolean;
 		nameConverter?: (file: File) => string | undefined;
 	},
 ): Promise<Misskey.entities.DriveFile[]> {
 	const uploadFolder = options?.uploadFolder ?? prefer.s.uploadFolder;
-	const keepOriginal = options?.keepOriginal ?? false;
 	const nameConverter = options?.nameConverter ?? (() => undefined);
 
 	return new Promise((res, rej) => {
@@ -30,15 +28,15 @@ export function chooseFileFromPc(
 		input.multiple = multiple;
 		input.onchange = () => {
 			if (!input.files) return res([]);
-			const promises = Array.from(
-				input.files,
-				file => uploadFile(file, uploadFolder, nameConverter(file), keepOriginal),
-			);
 
-			Promise.all(promises).then(driveFiles => {
-				res(driveFiles);
-			}).catch(err => {
-				// アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない
+			const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUploadDialog.vue')), {
+				files: markRaw(Array.from(input.files)),
+				uploadFolder,
+			}, {
+				done: driveFiles => {
+					res(driveFiles);
+				},
+				closed: () => dispose(),
 			});
 
 			// 一応廃棄
@@ -100,10 +98,6 @@ function select(src: HTMLElement | EventTarget | null, label: string | null, mul
 			text: label,
 			type: 'label',
 		} : undefined, {
-			text: i18n.ts.upload + ' (' + i18n.ts.compress + ')',
-			icon: 'ti ti-upload',
-			action: () => chooseFileFromPc(multiple, { keepOriginal: false }).then(files => res(files)),
-		}, {
 			text: i18n.ts.upload,
 			icon: 'ti ti-upload',
 			action: () => chooseFileFromPc(multiple, { keepOriginal: true }).then(files => res(files)),
diff --git a/packages/frontend/src/utility/upload.ts b/packages/frontend/src/utility/upload.ts
deleted file mode 100644
index 03240749e9..0000000000
--- a/packages/frontend/src/utility/upload.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import { reactive, ref } from 'vue';
-import * as Misskey from 'misskey-js';
-import { v4 as uuid } from 'uuid';
-import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
-import { apiUrl } from '@@/js/config.js';
-import { getCompressionConfig } from './upload/compress-config.js';
-import { $i } from '@/i.js';
-import { alert } from '@/os.js';
-import { i18n } from '@/i18n.js';
-import { instance } from '@/instance.js';
-import { prefer } from '@/preferences.js';
-
-type Uploading = {
-	id: string;
-	name: string;
-	progressMax: number | undefined;
-	progressValue: number | undefined;
-	img: string;
-};
-export const uploads = ref<Uploading[]>([]);
-
-const mimeTypeMap = {
-	'image/webp': 'webp',
-	'image/jpeg': 'jpg',
-	'image/png': 'png',
-} as const;
-
-export function uploadFile(
-	file: File,
-	folder?: string | Misskey.entities.DriveFolder | null,
-	name?: string,
-	keepOriginal = false,
-): Promise<Misskey.entities.DriveFile> {
-	if ($i == null) throw new Error('Not logged in');
-
-	const _folder = typeof folder === 'string' ? folder : folder?.id;
-
-	if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
-		alert({
-			type: 'error',
-			title: i18n.ts.failedToUpload,
-			text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-		});
-		return Promise.reject();
-	}
-
-	return new Promise((resolve, reject) => {
-		const id = uuid();
-
-		const reader = new FileReader();
-		reader.onload = async (): Promise<void> => {
-			const filename = name ?? file.name ?? 'untitled';
-			const extension = filename.split('.').length > 1 ? '.' + filename.split('.').pop() : '';
-
-			const ctx = reactive<Uploading>({
-				id,
-				name: prefer.s.keepOriginalFilename ? filename : id + extension,
-				progressMax: undefined,
-				progressValue: undefined,
-				img: window.URL.createObjectURL(file),
-			});
-
-			uploads.value.push(ctx);
-
-			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
-			let resizedImage: Blob | undefined;
-			if (config) {
-				try {
-					const resized = await readAndCompressImage(file, config);
-					if (resized.size < file.size || file.type === 'image/webp') {
-						// The compression may not always reduce the file size
-						// (and WebP is not browser safe yet)
-						resizedImage = resized;
-					}
-					if (_DEV_) {
-						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
-						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
-					}
-
-					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
-				} catch (err) {
-					console.error('Failed to resize image', err);
-				}
-			}
-
-			const formData = new FormData();
-			formData.append('i', $i!.token);
-			formData.append('force', 'true');
-			formData.append('file', resizedImage ?? file);
-			formData.append('name', ctx.name);
-			if (_folder) formData.append('folderId', _folder);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
-				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
-					uploads.value = uploads.value.filter(x => x.id !== id);
-
-					if (xhr.status === 413) {
-						alert({
-							type: 'error',
-							title: i18n.ts.failedToUpload,
-							text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-						});
-					} else if (ev.target?.response) {
-						const res = JSON.parse(ev.target.response);
-						if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseInappropriate,
-							});
-						} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseNoFreeSpace,
-							});
-						} else {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
-							});
-						}
-					} else {
-						alert({
-							type: 'error',
-							title: 'Failed to upload',
-							text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
-						});
-					}
-
-					reject();
-					return;
-				}
-
-				const driveFile = JSON.parse(ev.target.response);
-
-				resolve(driveFile);
-
-				uploads.value = uploads.value.filter(x => x.id !== id);
-			}) as (ev: ProgressEvent<EventTarget>) => any;
-
-			xhr.upload.onprogress = ev => {
-				if (ev.lengthComputable) {
-					ctx.progressMax = ev.total;
-					ctx.progressValue = ev.loaded;
-				}
-			};
-
-			xhr.send(formData);
-		};
-		reader.readAsArrayBuffer(file);
-	});
-}

From d73904ff1f0eb9297d2502dd365e5e54346102e2 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 12 May 2025 18:30:20 +0900
Subject: [PATCH 2/9] wip

---
 packages/frontend/src/components/MkDrive.vue  |   1 -
 .../frontend/src/components/MkModalWindow.vue |  13 +-
 .../frontend/src/components/MkPostForm.vue    |   1 -
 .../src/components/MkUploadDialog.vue         | 151 +++++++++++-------
 .../admin/custom-emojis-manager.register.vue  |   1 -
 .../frontend/src/pages/chat/room.form.vue     |   1 -
 packages/frontend/src/utility/select-file.ts  |   3 +-
 7 files changed, 103 insertions(+), 68 deletions(-)

diff --git a/packages/frontend/src/components/MkDrive.vue b/packages/frontend/src/components/MkDrive.vue
index 036ce1c807..4da77d4ee5 100644
--- a/packages/frontend/src/components/MkDrive.vue
+++ b/packages/frontend/src/components/MkDrive.vue
@@ -111,7 +111,6 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
-import { uploadFile, uploa______ds } from '@/utility/upload.js';
 import { claimAchievement } from '@/utility/achievements.js';
 import { prefer } from '@/preferences.js';
 import { chooseFileFromPc } from '@/utility/select-file.js';
diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue
index fb62e9e0cb..6b81e353e6 100644
--- a/packages/frontend/src/components/MkModalWindow.vue
+++ b/packages/frontend/src/components/MkModalWindow.vue
@@ -17,7 +17,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 		<div :class="$style.body">
 			<slot></slot>
 		</div>
-		<div :class="$style.footer">
+		<div v-if="$slots.footer" :class="$style.footer">
 			<slot name="footer"></slot>
 		</div>
 	</div>
@@ -125,15 +125,14 @@ defineExpose({
 .body {
 	flex: 1;
 	overflow: auto;
-	background: var(--MI_THEME-panel);
+	background: var(--MI_THEME-bg);
 	container-type: size;
 }
 
 .footer {
-	display: flex;
-	flex-shrink: 0;
-	background: var(--MI_THEME-windowHeader);
-	-webkit-backdrop-filter: var(--MI-blur, blur(15px));
-	backdrop-filter: var(--MI-blur, blur(15px));
+	padding: 8px 16px;
+	overflow: auto;
+	background: var(--MI_THEME-bg);
+	border-top: 1px solid var(--MI_THEME-divider);
 }
 </style>
diff --git a/packages/frontend/src/components/MkPostForm.vue b/packages/frontend/src/components/MkPostForm.vue
index 5114e98494..705b61f80e 100644
--- a/packages/frontend/src/components/MkPostForm.vue
+++ b/packages/frontend/src/components/MkPostForm.vue
@@ -127,7 +127,6 @@ import { i18n } from '@/i18n.js';
 import { instance } from '@/instance.js';
 import { ensureSignin, notesCount, incNotesCount } from '@/i.js';
 import { getAccounts, openAccountMenu as openAccountMenu_ } from '@/accounts.js';
-import { uploadFile } from '@/utility/upload.js';
 import { deepClone } from '@/utility/clone.js';
 import MkRippleEffect from '@/components/MkRippleEffect.vue';
 import { miLocalStorage } from '@/local-storage.js';
diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index c8a48e8a3c..085ad57000 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -8,34 +8,44 @@ SPDX-License-Identifier: AGPL-3.0-only
 	ref="dialog"
 	:width="800"
 	:height="500"
-	@click="cancel()"
 	@close="cancel()"
 	@closed="emit('closed')"
 >
 	<template #header>
-		{{ i18n.tsx.uploadNFiles({ n: files.length }) }}
+		<i class="ti ti-upload"></i> {{ i18n.tsx.uploadNFiles({ n: files.length }) }}
 	</template>
 
-	<div>
-		<div :class="$style.items">
-			<div v-for="ctx in items" :key="ctx.id" :class="$style.item">
-				<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
-				<div class="top">
-					<p class="name"><MkLoading :em="true"/>{{ ctx.name }}</p>
-					<p class="status">
-						<span v-if="ctx.progressValue === null" class="initing">{{ i18n.ts.waiting }}<MkEllipsis/></span>
-						<span v-if="ctx.progressValue !== null" class="kb">{{ String(Math.floor(ctx.progressValue / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i> / {{ String(Math.floor(ctx.progressMax / 1024)).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1,') }}<i>KB</i></span>
-						<span v-if="ctx.progressValue !== null" class="percentage">{{ Math.floor((ctx.progressValue / ctx.progressMax) * 100) }}</span>
-					</p>
+	<div :class="$style.root" class="_gaps_s">
+		<MkSwitch v-model="compress">
+			<template #label>{{ i18n.ts.compress }}</template>
+		</MkSwitch>
+		<div :class="$style.items" class="_gaps_s">
+			<div v-for="ctx in items" :key="ctx.id" v-panel :class="$style.item" :style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }">
+				<div :class="$style.itemInner">
+					<div>
+						<MkButton :iconOnly="true" rounded><i class="ti ti-dots"></i></MkButton>
+					</div>
+					<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
+					<div :class="$style.itemBody">
+						<div>{{ ctx.name }}</div>
+						<div style="opacity: 0.7; margin-top: 4px; font-size: 90%;">
+							<span>{{ bytes(ctx.file.size) }}</span>
+						</div>
+						<div>
+						</div>
+					</div>
+					<div>
+						<MkLoading v-if="ctx.uploading" :em="true"/>
+						<MkSystemIcon v-else-if="ctx.uploaded" type="success" style="width: 40px;"/>
+					</div>
 				</div>
-				<progress :value="ctx.progressValue || 0" :max="ctx.progressMax || 0" :class="{ initing: ctx.progressValue === null, waiting: ctx.progressValue !== null && ctx.progressValue === ctx.progressMax }"></progress>
 			</div>
 		</div>
 	</div>
 
 	<template #footer>
-		<div>
-			<MkButton primary rounded @click="upload()">{{ i18n.ts.upload }}</MkButton>
+		<div class="_buttonsCenter">
+			<MkButton primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
 		</div>
 	</template>
 </MkModalWindow>
@@ -46,13 +56,18 @@ import { markRaw, onMounted, ref, useTemplateRef } from 'vue';
 import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
+import { apiUrl } from '@@/js/config.js';
 import { getCompressionConfig } from '@/utility/upload/compress-config.js';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
-import { $i } from '@/i.js';
+import { ensureSignin } from '@/i.js';
 import { instance } from '@/instance.js';
 import MkButton from '@/components/MkButton.vue';
+import bytes from '@/filters/bytes.js';
+import MkSwitch from '@/components/MkSwitch.vue';
+
+const $i = ensureSignin();
 
 const mimeTypeMap = {
 	'image/webp': 'webp',
@@ -78,12 +93,15 @@ const items = ref([] as {
 	progressMax: number | null;
 	progressValue: number | null;
 	thumbnail: string;
+	uploading: boolean;
 	uploaded: Misskey.entities.DriveFile | null;
 	file: File;
 }[]);
 
 const dialog = useTemplateRef('dialog');
 
+const compress = ref(true);
+
 function cancel() {
 	// TODO: アップロードを中止しますか？
 	dialog.value?.close();
@@ -91,52 +109,51 @@ function cancel() {
 
 function upload() {
 	for (const item of items.value) {
-		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
+		if ((item.file.size > instance.maxFileSize) || (item.file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
 			alert({
 				type: 'error',
 				title: i18n.ts.failedToUpload,
 				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
 			});
-			return Promise.reject();
+			continue;
 		}
 
 		const reader = new FileReader();
 		reader.onload = async (): Promise<void> => {
-			const config = !keepOriginal ? await getCompressionConfig(file) : undefined;
+			const config = compress.value ? await getCompressionConfig(item.file) : undefined;
 			let resizedImage: Blob | undefined;
 			if (config) {
 				try {
-					const resized = await readAndCompressImage(file, config);
-					if (resized.size < file.size || file.type === 'image/webp') {
+					const resized = await readAndCompressImage(item.file, config);
+					if (resized.size < item.file.size || item.file.type === 'image/webp') {
 						// The compression may not always reduce the file size
 						// (and WebP is not browser safe yet)
 						resizedImage = resized;
 					}
 					if (_DEV_) {
-						const saved = ((1 - resized.size / file.size) * 100).toFixed(2);
-						console.log(`Image compression: before ${file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
+						const saved = ((1 - resized.size / item.file.size) * 100).toFixed(2);
+						console.log(`Image compression: before ${item.file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
 					}
 
-					ctx.name = file.type !== config.mimeType ? `${ctx.name}.${mimeTypeMap[config.mimeType]}` : ctx.name;
+					item.name = item.file.type !== config.mimeType ? `${item.name}.${mimeTypeMap[config.mimeType]}` : item.name;
 				} catch (err) {
 					console.error('Failed to resize image', err);
 				}
 			}
 
 			const formData = new FormData();
-			formData.append('i', $i!.token);
+			formData.append('i', $i.token);
 			formData.append('force', 'true');
-			formData.append('file', resizedImage ?? file);
-			formData.append('name', ctx.name);
-			if (_folder) formData.append('folderId', _folder);
+			formData.append('file', resizedImage ?? item.file);
+			formData.append('name', item.name);
+			if (props.folderId) formData.append('folderId', props.folderId);
 
 			const xhr = new XMLHttpRequest();
 			xhr.open('POST', apiUrl + '/drive/files/create', true);
 			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
-				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-					// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
-					uploa______ds.value = uploa______ds.value.filter(x => x.id !== id);
+				item.uploading = false;
 
+				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
 					if (xhr.status === 413) {
 						alert({
 							type: 'error',
@@ -177,22 +194,19 @@ function upload() {
 				}
 
 				const driveFile = JSON.parse(ev.target.response);
-
-				resolve(driveFile);
-
-				uploa______ds.value = uploa______ds.value.filter(x => x.id !== id);
+				item.uploaded = driveFile;
 			}) as (ev: ProgressEvent<EventTarget>) => any;
 
 			xhr.upload.onprogress = ev => {
 				if (ev.lengthComputable) {
-					ctx.progressMax = ev.total;
-					ctx.progressValue = ev.loaded;
+					item.progressMax = ev.total;
+					item.progressValue = ev.loaded;
 				}
 			};
 
 			xhr.send(formData);
 		};
-		reader.readAsArrayBuffer(file);
+		reader.readAsArrayBuffer(item.file);
 	}
 }
 
@@ -215,23 +229,50 @@ onMounted(() => {
 </script>
 
 <style lang="scss" module>
-.mk-uploader > ol > li > progress {
-  display: block;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  overflow: hidden;
-  grid-column: 2/3;
-  grid-row: 2/3;
-  z-index: 2;
-	width: 100%;
-	height: 8px;
+.root {
+	padding: 12px;
 }
-.mk-uploader > ol > li > progress::-webkit-progress-value {
-  background: var(--MI_THEME-accent);
+
+.items {
 }
-.mk-uploader > ol > li > progress::-webkit-progress-bar {
-  //background: var(--MI_THEME-accentAlpha01);
-	background: transparent;
+
+.item {
+	position: relative;
+	border-radius: 10px;
+	overflow: clip;
+
+	&::before {
+		content: '';
+		display: block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: var(--p);
+		height: 100%;
+		background: color(from var(--MI_THEME-accent) srgb r g b / 0.5);
+	}
+}
+
+.itemInner {
+	position: relative;
+	z-index: 1;
+	padding: 8px 16px;
+	display: flex;
+	align-items: center;
+	gap: 8px;
+}
+
+.itemThumbnail {
+	width: 70px;
+	height: 70px;
+	background-size: contain;
+	background-position: center;
+	background-repeat: no-repeat;
+	border-radius: 6px;
+}
+
+.itemBody {
+	flex: 1;
+	min-width: 0;
 }
 </style>
diff --git a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
index e8e944df32..0f4912ece1 100644
--- a/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
+++ b/packages/frontend/src/pages/admin/custom-emojis-manager.register.vue
@@ -95,7 +95,6 @@ import MkButton from '@/components/MkButton.vue';
 import * as os from '@/os.js';
 import { validators } from '@/components/grid/cell-validators.js';
 import { chooseFileFromDrive, chooseFileFromPc } from '@/utility/select-file.js';
-import { uploadFile } from '@/utility/upload.js';
 import { extractDroppedItems, flattenDroppedFiles } from '@/utility/file-drop.js';
 import XRegisterLogs from '@/pages/admin/custom-emojis-manager.logs.vue';
 import { copyGridDataToClipboard } from '@/components/grid/grid-utils.js';
diff --git a/packages/frontend/src/pages/chat/room.form.vue b/packages/frontend/src/pages/chat/room.form.vue
index 9389b16ce7..f13b91c283 100644
--- a/packages/frontend/src/pages/chat/room.form.vue
+++ b/packages/frontend/src/pages/chat/room.form.vue
@@ -41,7 +41,6 @@ import { formatTimeString } from '@/utility/format-time-string.js';
 import { selectFile } from '@/utility/select-file.js';
 import * as os from '@/os.js';
 import { i18n } from '@/i18n.js';
-import { uploadFile } from '@/utility/upload.js';
 import { miLocalStorage } from '@/local-storage.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { prefer } from '@/preferences.js';
diff --git a/packages/frontend/src/utility/select-file.ts b/packages/frontend/src/utility/select-file.ts
index 1d9fa8d3c3..fe8a87f111 100644
--- a/packages/frontend/src/utility/select-file.ts
+++ b/packages/frontend/src/utility/select-file.ts
@@ -9,7 +9,6 @@ import * as os from '@/os.js';
 import { misskeyApi } from '@/utility/misskey-api.js';
 import { useStream } from '@/stream.js';
 import { i18n } from '@/i18n.js';
-import { uploadFile } from '@/utility/upload.js';
 import { prefer } from '@/preferences.js';
 
 export function chooseFileFromPc(
@@ -31,7 +30,7 @@ export function chooseFileFromPc(
 
 			const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkUploadDialog.vue')), {
 				files: markRaw(Array.from(input.files)),
-				uploadFolder,
+				folderId: uploadFolder,
 			}, {
 				done: driveFiles => {
 					res(driveFiles);

From 73157dd898169e3778f5e8659f344c18b8ff7d45 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 12 May 2025 20:29:23 +0900
Subject: [PATCH 3/9] Update MkUploadDialog.vue

---
 .../src/components/MkUploadDialog.vue         | 56 ++++++++++++++++---
 1 file changed, 49 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index 085ad57000..c78e0caeb7 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -16,11 +16,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</template>
 
 	<div :class="$style.root" class="_gaps_s">
-		<MkSwitch v-model="compress">
-			<template #label>{{ i18n.ts.compress }}</template>
-		</MkSwitch>
 		<div :class="$style.items" class="_gaps_s">
-			<div v-for="ctx in items" :key="ctx.id" v-panel :class="$style.item" :style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }">
+			<div v-for="ctx in items" :key="ctx.id" v-panel :class="[$style.item, ctx.waiting ? $style.itemWaiting : null]" :style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }">
 				<div :class="$style.itemInner">
 					<div>
 						<MkButton :iconOnly="true" rounded><i class="ti ti-dots"></i></MkButton>
@@ -41,18 +38,23 @@ SPDX-License-Identifier: AGPL-3.0-only
 				</div>
 			</div>
 		</div>
+
+		<MkSwitch v-model="compress">
+			<template #label>{{ i18n.ts.compress }}</template>
+		</MkSwitch>
 	</div>
 
 	<template #footer>
 		<div class="_buttonsCenter">
-			<MkButton primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
+			<MkButton v-if="uploadStarted" rounded @click=""><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
+			<MkButton v-else primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
 		</div>
 	</template>
 </MkModalWindow>
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, ref, useTemplateRef } from 'vue';
+import { markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
@@ -93,6 +95,7 @@ const items = ref([] as {
 	progressMax: number | null;
 	progressValue: number | null;
 	thumbnail: string;
+	waiting: boolean;
 	uploading: boolean;
 	uploaded: Misskey.entities.DriveFile | null;
 	file: File;
@@ -101,6 +104,14 @@ const items = ref([] as {
 const dialog = useTemplateRef('dialog');
 
 const compress = ref(true);
+const uploadStarted = ref(false);
+
+watch(items, () => {
+	if (uploadStarted.value && items.value.every(item => item.uploaded)) {
+		emit('done', items.value.map(item => item.uploaded!));
+		dialog.value?.close();
+	}
+}, { deep: true });
 
 function cancel() {
 	// TODO: アップロードを中止しますか？
@@ -108,6 +119,8 @@ function cancel() {
 }
 
 function upload() {
+	uploadStarted.value = true;
+
 	for (const item of items.value) {
 		if ((item.file.size > instance.maxFileSize) || (item.file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
 			alert({
@@ -118,6 +131,8 @@ function upload() {
 			continue;
 		}
 
+		item.waiting = true;
+
 		const reader = new FileReader();
 		reader.onload = async (): Promise<void> => {
 			const config = compress.value ? await getCompressionConfig(item.file) : undefined;
@@ -199,12 +214,14 @@ function upload() {
 
 			xhr.upload.onprogress = ev => {
 				if (ev.lengthComputable) {
+					item.waiting = false;
 					item.progressMax = ev.total;
 					item.progressValue = ev.loaded;
 				}
 			};
 
 			xhr.send(formData);
+			item.uploading = true;
 		};
 		reader.readAsArrayBuffer(item.file);
 	}
@@ -221,6 +238,8 @@ onMounted(() => {
 			progressMax: null,
 			progressValue: null,
 			thumbnail: window.URL.createObjectURL(file),
+			waiting: false,
+			uploading: false,
 			uploaded: null,
 			file: markRaw(file),
 		});
@@ -250,7 +269,30 @@ onMounted(() => {
 		width: var(--p);
 		height: 100%;
 		background: color(from var(--MI_THEME-accent) srgb r g b / 0.5);
+		transition: width 0.2s ease;
 	}
+
+	&.itemWaiting {
+		&::after {
+			--c: color(from var(--MI_THEME-accent) srgb r g b / 0.25);
+
+			content: '';
+			display: block;
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			background: linear-gradient(-45deg, transparent 25%, var(--c) 25%,var(--c) 50%, transparent 50%, transparent 75%, var(--c) 75%, var(--c));
+			background-size: 25px 25px;
+			animation: stripe .8s infinite linear;
+		}
+	}
+}
+
+@keyframes stripe {
+	0% { background-position-x: 0; }
+	100% { background-position-x: -25px; }
 }
 
 .itemInner {
@@ -259,7 +301,7 @@ onMounted(() => {
 	padding: 8px 16px;
 	display: flex;
 	align-items: center;
-	gap: 8px;
+	gap: 12px;
 }
 
 .itemThumbnail {

From 6205dc44f04ea356dbdd1a0bf3e9556bcbcd6572 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 12 May 2025 21:17:41 +0900
Subject: [PATCH 4/9] wip

---
 .../src/components/MkUploadDialog.vue         | 41 ++++++++++++++++---
 .../src/utility/upload/compress-config.ts     | 14 +++----
 2 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index c78e0caeb7..fe3ce3c00f 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -39,9 +39,18 @@ SPDX-License-Identifier: AGPL-3.0-only
 			</div>
 		</div>
 
-		<MkSwitch v-model="compress">
+		<MkSelect
+			v-if="items.length > 0"
+			v-model="compressionLevel"
+			:items="[
+				{ value: 0, label: i18n.ts.none },
+				{ value: 1, label: i18n.ts.low },
+				{ value: 2, label: i18n.ts.middle },
+				{ value: 3, label: i18n.ts.high },
+			]"
+		>
 			<template #label>{{ i18n.ts.compress }}</template>
-		</MkSwitch>
+		</MkSelect>
 	</div>
 
 	<template #footer>
@@ -54,7 +63,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
+import { computed, markRaw, onMounted, ref, useTemplateRef, watch } from 'vue';
 import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
@@ -68,6 +77,7 @@ import { instance } from '@/instance.js';
 import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes.js';
 import MkSwitch from '@/components/MkSwitch.vue';
+import MkSelect from '@/components/MkSelect.vue';
 
 const $i = ensureSignin();
 
@@ -103,8 +113,29 @@ const items = ref([] as {
 
 const dialog = useTemplateRef('dialog');
 
-const compress = ref(true);
 const uploadStarted = ref(false);
+const compressionLevel = ref<0 | 1 | 2 | 3>(2);
+
+const compressionSettings = computed(() => {
+	if (compressionLevel.value === 1) {
+		return {
+			maxWidth: 1024 + 512,
+			maxHeight: 1024 + 512,
+		};
+	} else if (compressionLevel.value === 2) {
+		return {
+			maxWidth: 1024 + 256,
+			maxHeight: 1024 + 256,
+		};
+	} else if (compressionLevel.value === 3) {
+		return {
+			maxWidth: 1024,
+			maxHeight: 1024,
+		};
+	} else {
+		return null;
+	}
+});
 
 watch(items, () => {
 	if (uploadStarted.value && items.value.every(item => item.uploaded)) {
@@ -135,7 +166,7 @@ function upload() {
 
 		const reader = new FileReader();
 		reader.onload = async (): Promise<void> => {
-			const config = compress.value ? await getCompressionConfig(item.file) : undefined;
+			const config = compressionLevel.value !== 0 ? await getCompressionConfig(item.file, compressionSettings.value) : undefined;
 			let resizedImage: Blob | undefined;
 			if (config) {
 				try {
diff --git a/packages/frontend/src/utility/upload/compress-config.ts b/packages/frontend/src/utility/upload/compress-config.ts
index 3046b7f518..48d2bdafbe 100644
--- a/packages/frontend/src/utility/upload/compress-config.ts
+++ b/packages/frontend/src/utility/upload/compress-config.ts
@@ -8,28 +8,28 @@ import { isWebpSupported } from './isWebpSupported.js';
 import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
 
 const compressTypeMap = {
-	'image/jpeg': { quality: 0.90, mimeType: 'image/webp' },
+	'image/jpeg': { quality: 0.85, mimeType: 'image/webp' },
 	'image/png': { quality: 1, mimeType: 'image/webp' },
-	'image/webp': { quality: 0.90, mimeType: 'image/webp' },
+	'image/webp': { quality: 0.85, mimeType: 'image/webp' },
 	'image/svg+xml': { quality: 1, mimeType: 'image/webp' },
 } as const;
 
 const compressTypeMapFallback = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/jpeg': { quality: 0.8, mimeType: 'image/jpeg' },
 	'image/png': { quality: 1, mimeType: 'image/png' },
-	'image/webp': { quality: 0.85, mimeType: 'image/jpeg' },
+	'image/webp': { quality: 0.8, mimeType: 'image/jpeg' },
 	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
 } as const;
 
-export async function getCompressionConfig(file: File): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
+export async function getCompressionConfig(file: File, options: Partial<{ maxWidth: number; maxHeight: number; }> = {}): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
 	const imgConfig = (isWebpSupported() ? compressTypeMap : compressTypeMapFallback)[file.type];
 	if (!imgConfig || await isAnimated(file)) {
 		return;
 	}
 
 	return {
-		maxWidth: 2048,
-		maxHeight: 2048,
+		maxWidth: options.maxWidth ?? 2048,
+		maxHeight: options.maxHeight ?? 2048,
 		debug: true,
 		...imgConfig,
 	};

From 785258da202e9ef83fecb598560c0722d3817056 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Mon, 12 May 2025 21:27:37 +0900
Subject: [PATCH 5/9] wip

---
 .../src/utility/upload/compress-config.ts     | 25 +++++++------------
 1 file changed, 9 insertions(+), 16 deletions(-)

diff --git a/packages/frontend/src/utility/upload/compress-config.ts b/packages/frontend/src/utility/upload/compress-config.ts
index 48d2bdafbe..1868d262d2 100644
--- a/packages/frontend/src/utility/upload/compress-config.ts
+++ b/packages/frontend/src/utility/upload/compress-config.ts
@@ -7,30 +7,23 @@ import isAnimated from 'is-file-animated';
 import { isWebpSupported } from './isWebpSupported.js';
 import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
 
-const compressTypeMap = {
-	'image/jpeg': { quality: 0.85, mimeType: 'image/webp' },
-	'image/png': { quality: 1, mimeType: 'image/webp' },
-	'image/webp': { quality: 0.85, mimeType: 'image/webp' },
-	'image/svg+xml': { quality: 1, mimeType: 'image/webp' },
-} as const;
-
-const compressTypeMapFallback = {
-	'image/jpeg': { quality: 0.8, mimeType: 'image/jpeg' },
-	'image/png': { quality: 1, mimeType: 'image/png' },
-	'image/webp': { quality: 0.8, mimeType: 'image/jpeg' },
-	'image/svg+xml': { quality: 1, mimeType: 'image/png' },
-} as const;
+const supportedTypes = [
+	'image/jpeg',
+	'image/png',
+	'image/webp',
+	'image/svg+xml',
+] as const;
 
 export async function getCompressionConfig(file: File, options: Partial<{ maxWidth: number; maxHeight: number; }> = {}): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
-	const imgConfig = (isWebpSupported() ? compressTypeMap : compressTypeMapFallback)[file.type];
-	if (!imgConfig || await isAnimated(file)) {
+	if (!supportedTypes.includes(file.type) || await isAnimated(file)) {
 		return;
 	}
 
 	return {
+		mimeType: isWebpSupported() ? 'image/webp' : 'image/jpeg',
 		maxWidth: options.maxWidth ?? 2048,
 		maxHeight: options.maxHeight ?? 2048,
+		quality: isWebpSupported() ? 0.9 : 0.85,
 		debug: true,
-		...imgConfig,
 	};
 }

From 5c44e5ba59d8054c3c6e5dfd223621ebc624cc7e Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 11:19:06 +0900
Subject: [PATCH 6/9] wip

---
 .../src/components/MkUploadDialog.vue         | 206 ++++++++----------
 .../utility/{upload => }/isWebpSupported.ts   |   0
 packages/frontend/src/utility/upload.ts       |  97 +++++++++
 .../src/utility/upload/compress-config.ts     |  29 ---
 4 files changed, 190 insertions(+), 142 deletions(-)
 rename packages/frontend/src/utility/{upload => }/isWebpSupported.ts (100%)
 create mode 100644 packages/frontend/src/utility/upload.ts
 delete mode 100644 packages/frontend/src/utility/upload/compress-config.ts

diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index fe3ce3c00f..96a380d89f 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -20,13 +20,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<div v-for="ctx in items" :key="ctx.id" v-panel :class="[$style.item, ctx.waiting ? $style.itemWaiting : null]" :style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }">
 				<div :class="$style.itemInner">
 					<div>
-						<MkButton :iconOnly="true" rounded><i class="ti ti-dots"></i></MkButton>
+						<MkButton :iconOnly="true" rounded @click="showMenu($event, ctx)"><i class="ti ti-dots"></i></MkButton>
 					</div>
 					<div :class="$style.itemThumbnail" :style="{ backgroundImage: `url(${ ctx.thumbnail })` }"></div>
 					<div :class="$style.itemBody">
 						<div>{{ ctx.name }}</div>
-						<div style="opacity: 0.7; margin-top: 4px; font-size: 90%;">
+						<div :class="$style.itemInfo">
 							<span>{{ bytes(ctx.file.size) }}</span>
+							<span v-if="ctx.compressedSize">({{ bytes(ctx.compressedSize) }})</span>
 						</div>
 						<div>
 						</div>
@@ -34,6 +35,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					<div>
 						<MkLoading v-if="ctx.uploading" :em="true"/>
 						<MkSystemIcon v-else-if="ctx.uploaded" type="success" style="width: 40px;"/>
+						<MkSystemIcon v-else-if="ctx.uploadFailed" type="error" style="width: 40px;"/>
 					</div>
 				</div>
 			</div>
@@ -55,8 +57,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<template #footer>
 		<div class="_buttonsCenter">
-			<MkButton v-if="uploadStarted" rounded @click=""><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
-			<MkButton v-else primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
+			<MkButton v-if="isUploading" rounded @click=""><i class="ti ti-x"></i> {{ i18n.ts.cancel }}</MkButton>
+			<MkButton v-else-if="!firstUploadAttempted" primary rounded @click="upload()"><i class="ti ti-upload"></i> {{ i18n.ts.upload }}</MkButton>
+			<MkButton v-else-if="canRetry" primary rounded @click="upload()"><i class="ti ti-reload"></i> {{ i18n.ts.retry }}</MkButton>
 		</div>
 	</template>
 </MkModalWindow>
@@ -68,7 +71,8 @@ import * as Misskey from 'misskey-js';
 import { v4 as uuid } from 'uuid';
 import { readAndCompressImage } from '@misskey-dev/browser-image-resizer';
 import { apiUrl } from '@@/js/config.js';
-import { getCompressionConfig } from '@/utility/upload/compress-config.js';
+import isAnimated from 'is-file-animated';
+import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
 import MkModalWindow from '@/components/MkModalWindow.vue';
 import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.js';
@@ -78,9 +82,18 @@ import MkButton from '@/components/MkButton.vue';
 import bytes from '@/filters/bytes.js';
 import MkSwitch from '@/components/MkSwitch.vue';
 import MkSelect from '@/components/MkSelect.vue';
+import { isWebpSupported } from '@/utility/isWebpSupported.js';
+import { uploadFile } from '@/utility/upload.js';
 
 const $i = ensureSignin();
 
+const compressionSupportedTypes = [
+	'image/jpeg',
+	'image/png',
+	'image/webp',
+	'image/svg+xml',
+] as const;
+
 const mimeTypeMap = {
 	'image/webp': 'webp',
 	'image/jpeg': 'jpg',
@@ -108,29 +121,34 @@ const items = ref([] as {
 	waiting: boolean;
 	uploading: boolean;
 	uploaded: Misskey.entities.DriveFile | null;
+	uploadFailed: boolean;
+	compressedSize?: number | null;
+	compressedImage?: Blob | null;
 	file: File;
 }[]);
 
 const dialog = useTemplateRef('dialog');
 
-const uploadStarted = ref(false);
-const compressionLevel = ref<0 | 1 | 2 | 3>(2);
+const firstUploadAttempted = ref(false);
+const isUploading = computed(() => items.value.some(item => item.uploading));
+const canRetry = computed(() => firstUploadAttempted.value && !isUploading.value && items.value.some(item => item.uploaded == null));
 
+const compressionLevel = ref<0 | 1 | 2 | 3>(2);
 const compressionSettings = computed(() => {
 	if (compressionLevel.value === 1) {
 		return {
-			maxWidth: 1024 + 512,
-			maxHeight: 1024 + 512,
+			maxWidth: 2000,
+			maxHeight: 2000,
 		};
 	} else if (compressionLevel.value === 2) {
 		return {
-			maxWidth: 1024 + 256,
-			maxHeight: 1024 + 256,
+			maxWidth: 2000 * 0.75, // =1500
+			maxHeight: 2000 * 0.75, // =1500
 		};
 	} else if (compressionLevel.value === 3) {
 		return {
-			maxWidth: 1024,
-			maxHeight: 1024,
+			maxWidth: 2000 * 0.75 * 0.75, // =1125
+			maxHeight: 2000 * 0.75 * 0.75, // =1125
 		};
 	} else {
 		return null;
@@ -138,7 +156,12 @@ const compressionSettings = computed(() => {
 });
 
 watch(items, () => {
-	if (uploadStarted.value && items.value.every(item => item.uploaded)) {
+	if (items.value.length === 0) {
+		dialog.value?.close();
+		return;
+	}
+
+	if (items.value.every(item => item.uploaded)) {
 		emit('done', items.value.map(item => item.uploaded!));
 		dialog.value?.close();
 	}
@@ -149,112 +172,60 @@ function cancel() {
 	dialog.value?.close();
 }
 
-function upload() {
-	uploadStarted.value = true;
+function showMenu(ev: MouseEvent, item: typeof items.value[0]) {
 
-	for (const item of items.value) {
-		if ((item.file.size > instance.maxFileSize) || (item.file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
-			alert({
-				type: 'error',
-				title: i18n.ts.failedToUpload,
-				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-			});
-			continue;
-		}
+}
 
+async function upload() { // エラーハンドリングなどを考慮してシーケンシャルにやる
+	firstUploadAttempted.value = true;
+
+	for (const item of items.value.filter(item => item.uploaded == null)) {
 		item.waiting = true;
 
-		const reader = new FileReader();
-		reader.onload = async (): Promise<void> => {
-			const config = compressionLevel.value !== 0 ? await getCompressionConfig(item.file, compressionSettings.value) : undefined;
-			let resizedImage: Blob | undefined;
-			if (config) {
-				try {
-					const resized = await readAndCompressImage(item.file, config);
-					if (resized.size < item.file.size || item.file.type === 'image/webp') {
-						// The compression may not always reduce the file size
-						// (and WebP is not browser safe yet)
-						resizedImage = resized;
-					}
-					if (_DEV_) {
-						const saved = ((1 - resized.size / item.file.size) * 100).toFixed(2);
-						console.log(`Image compression: before ${item.file.size} bytes, after ${resized.size} bytes, saved ${saved}%`);
-					}
+		const shouldCompress = item.compressedImage == null && compressionLevel.value !== 0 && compressionSettings.value && compressionSupportedTypes.includes(item.file.type) && !(await isAnimated(item.file));
 
-					item.name = item.file.type !== config.mimeType ? `${item.name}.${mimeTypeMap[config.mimeType]}` : item.name;
-				} catch (err) {
-					console.error('Failed to resize image', err);
-				}
-			}
-
-			const formData = new FormData();
-			formData.append('i', $i.token);
-			formData.append('force', 'true');
-			formData.append('file', resizedImage ?? item.file);
-			formData.append('name', item.name);
-			if (props.folderId) formData.append('folderId', props.folderId);
-
-			const xhr = new XMLHttpRequest();
-			xhr.open('POST', apiUrl + '/drive/files/create', true);
-			xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
-				item.uploading = false;
-
-				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
-					if (xhr.status === 413) {
-						alert({
-							type: 'error',
-							title: i18n.ts.failedToUpload,
-							text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
-						});
-					} else if (ev.target?.response) {
-						const res = JSON.parse(ev.target.response);
-						if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseInappropriate,
-							});
-						} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: i18n.ts.cannotUploadBecauseNoFreeSpace,
-							});
-						} else {
-							alert({
-								type: 'error',
-								title: i18n.ts.failedToUpload,
-								text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
-							});
-						}
-					} else {
-						alert({
-							type: 'error',
-							title: 'Failed to upload',
-							text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
-						});
-					}
-
-					reject();
-					return;
-				}
-
-				const driveFile = JSON.parse(ev.target.response);
-				item.uploaded = driveFile;
-			}) as (ev: ProgressEvent<EventTarget>) => any;
-
-			xhr.upload.onprogress = ev => {
-				if (ev.lengthComputable) {
-					item.waiting = false;
-					item.progressMax = ev.total;
-					item.progressValue = ev.loaded;
-				}
+		if (shouldCompress) {
+			const config = {
+				mimeType: isWebpSupported() ? 'image/webp' : 'image/jpeg',
+				maxWidth: compressionSettings.value.maxWidth,
+				maxHeight: compressionSettings.value.maxHeight,
+				quality: isWebpSupported() ? 0.85 : 0.8,
 			};
 
-			xhr.send(formData);
-			item.uploading = true;
-		};
-		reader.readAsArrayBuffer(item.file);
+			try {
+				const result = await readAndCompressImage(item.file, config);
+				if (result.size < item.file.size || item.file.type === 'image/webp') {
+					// The compression may not always reduce the file size
+					// (and WebP is not browser safe yet)
+					item.compressedImage = markRaw(result);
+					item.compressedSize = result.size;
+					item.name = item.file.type !== config.mimeType ? `${item.name}.${mimeTypeMap[config.mimeType]}` : item.name;
+				}
+			} catch (err) {
+				console.error('Failed to resize image', err);
+			}
+		}
+
+		item.uploading = true;
+
+		const driveFile = await uploadFile(item.compressedImage ?? item.file, {
+			name: item.name,
+			folderId: props.folderId,
+			onProgress: (progress) => {
+				item.waiting = false;
+				item.progressMax = progress.total;
+				item.progressValue = progress.loaded;
+			},
+		}).catch(err => {
+			item.uploadFailed = true;
+			item.progressMax = null;
+			item.progressValue = null;
+			throw err;
+		}).finally(() => {
+			item.uploading = false;
+		});
+
+		item.uploaded = driveFile;
 	}
 }
 
@@ -272,6 +243,7 @@ onMounted(() => {
 			waiting: false,
 			uploading: false,
 			uploaded: null,
+			uploadFailed: false,
 			file: markRaw(file),
 		});
 	}
@@ -348,4 +320,12 @@ onMounted(() => {
 	flex: 1;
 	min-width: 0;
 }
+
+.itemInfo {
+	opacity: 0.7;
+	margin-top: 4px;
+	font-size: 90%;
+	display: flex;
+	gap: 8px;
+}
 </style>
diff --git a/packages/frontend/src/utility/upload/isWebpSupported.ts b/packages/frontend/src/utility/isWebpSupported.ts
similarity index 100%
rename from packages/frontend/src/utility/upload/isWebpSupported.ts
rename to packages/frontend/src/utility/isWebpSupported.ts
diff --git a/packages/frontend/src/utility/upload.ts b/packages/frontend/src/utility/upload.ts
new file mode 100644
index 0000000000..548f879226
--- /dev/null
+++ b/packages/frontend/src/utility/upload.ts
@@ -0,0 +1,97 @@
+/*
+ * SPDX-FileCopyrightText: syuilo and misskey-project
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+import * as Misskey from 'misskey-js';
+import { apiUrl } from '@@/js/config.js';
+import { $i } from '@/i.js';
+import { instance } from '@/instance.js';
+import { i18n } from '@/i18n.js';
+import * as os from '@/os.js';
+
+export function uploadFile(file: File, options: {
+	name?: string;
+	folderId?: string | null;
+	onProgress?: (ctx: { total: number; loaded: number; }) => void;
+} = {}): Promise<Misskey.entities.DriveFile> {
+	return new Promise((resolve, reject) => {
+		if ($i == null) return reject();
+
+		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
+			os.alert({
+				type: 'error',
+				title: i18n.ts.failedToUpload,
+				text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+			});
+			return reject();
+		}
+
+		const xhr = new XMLHttpRequest();
+		xhr.open('POST', apiUrl + '/drive/files/create', true);
+		xhr.onload = ((ev: ProgressEvent<XMLHttpRequest>) => {
+			if (xhr.status !== 200 || ev.target == null || ev.target.response == null) {
+				if (xhr.status === 413) {
+					os.alert({
+						type: 'error',
+						title: i18n.ts.failedToUpload,
+						text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
+					});
+				} else if (ev.target?.response) {
+					const res = JSON.parse(ev.target.response);
+					if (res.error?.id === 'bec5bd69-fba3-43c9-b4fb-2894b66ad5d2') {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: i18n.ts.cannotUploadBecauseInappropriate,
+						});
+					} else if (res.error?.id === 'd08dbc37-a6a9-463a-8c47-96c32ab5f064') {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: i18n.ts.cannotUploadBecauseNoFreeSpace,
+						});
+					} else {
+						os.alert({
+							type: 'error',
+							title: i18n.ts.failedToUpload,
+							text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
+						});
+					}
+				} else {
+					os.alert({
+						type: 'error',
+						title: 'Failed to upload',
+						text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(xhr.response)}`,
+					});
+				}
+
+				reject();
+				return;
+			}
+
+			const driveFile = JSON.parse(ev.target.response);
+			resolve(driveFile);
+		}) as (ev: ProgressEvent<EventTarget>) => any;
+
+		if (options.onProgress) {
+			xhr.upload.onprogress = ev => {
+				if (ev.lengthComputable) {
+					options.onProgress({
+						total: ev.total,
+						loaded: ev.loaded,
+					});
+				}
+			};
+		}
+
+		const formData = new FormData();
+		formData.append('i', $i.token);
+		formData.append('force', 'true');
+		formData.append('file', file);
+		formData.append('name', options.name ?? file.name);
+		if (options.folderId) formData.append('folderId', options.folderId);
+
+		xhr.send(formData);
+	});
+}
diff --git a/packages/frontend/src/utility/upload/compress-config.ts b/packages/frontend/src/utility/upload/compress-config.ts
deleted file mode 100644
index 1868d262d2..0000000000
--- a/packages/frontend/src/utility/upload/compress-config.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * SPDX-FileCopyrightText: syuilo and misskey-project
- * SPDX-License-Identifier: AGPL-3.0-only
- */
-
-import isAnimated from 'is-file-animated';
-import { isWebpSupported } from './isWebpSupported.js';
-import type { BrowserImageResizerConfigWithConvertedOutput } from '@misskey-dev/browser-image-resizer';
-
-const supportedTypes = [
-	'image/jpeg',
-	'image/png',
-	'image/webp',
-	'image/svg+xml',
-] as const;
-
-export async function getCompressionConfig(file: File, options: Partial<{ maxWidth: number; maxHeight: number; }> = {}): Promise<BrowserImageResizerConfigWithConvertedOutput | undefined> {
-	if (!supportedTypes.includes(file.type) || await isAnimated(file)) {
-		return;
-	}
-
-	return {
-		mimeType: isWebpSupported() ? 'image/webp' : 'image/jpeg',
-		maxWidth: options.maxWidth ?? 2048,
-		maxHeight: options.maxHeight ?? 2048,
-		quality: isWebpSupported() ? 0.9 : 0.85,
-		debug: true,
-	};
-}

From 5a8cd627ef78718fa95effd4cb355cf4c354b76f Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 11:37:46 +0900
Subject: [PATCH 7/9] wip

---
 .../src/components/MkUploadDialog.vue         |  8 +++++-
 .../src/components/global/MkSystemIcon.vue    | 26 ++++++++++++++++++-
 packages/frontend/src/pages/debug.vue         |  2 ++
 3 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index 96a380d89f..9dcdea2523 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -33,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 					</div>
 					<div>
-						<MkLoading v-if="ctx.uploading" :em="true"/>
+						<MkSystemIcon v-if="ctx.uploading" type="waiting" style="width: 40px;"/>
 						<MkSystemIcon v-else-if="ctx.uploaded" type="success" style="width: 40px;"/>
 						<MkSystemIcon v-else-if="ctx.uploadFailed" type="error" style="width: 40px;"/>
 					</div>
@@ -321,6 +321,12 @@ onMounted(() => {
 	min-width: 0;
 }
 
+@container (max-width: 500px) {
+	.itemBody {
+		font-size: 90%;
+	}
+}
+
 .itemInfo {
 	opacity: 0.7;
 	margin-top: 4px;
diff --git a/packages/frontend/src/components/global/MkSystemIcon.vue b/packages/frontend/src/components/global/MkSystemIcon.vue
index 3454cdc9f2..d2ef0fb2d8 100644
--- a/packages/frontend/src/components/global/MkSystemIcon.vue
+++ b/packages/frontend/src/components/global/MkSystemIcon.vue
@@ -28,13 +28,17 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<path d="M96,63L63,96" style="--l:47;--duration:0.3s;--delay:0.2s;" :class="[$style.line, $style.animLine]"/>
 	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircle]"/>
 </svg>
+<svg v-else-if="type === 'waiting'" :class="[$style.icon, $style.waiting]" viewBox="0 0 160 160">
+	<circle cx="80" cy="80" r="56" style="--l:350;" :class="[$style.line, $style.animCircleWaiting]"/>
+	<circle cx="80" cy="80" r="56" style="opacity: 0.25;" :class="[$style.line]"/>
+</svg>
 </template>
 
 <script lang="ts" setup>
 import {} from 'vue';
 
 const props = defineProps<{
-	type: 'info' | 'question' | 'success' | 'warn' | 'error';
+	type: 'info' | 'question' | 'success' | 'warn' | 'error' | 'waiting';
 }>();
 </script>
 
@@ -62,6 +66,10 @@ const props = defineProps<{
 	&.error {
 		color: var(--MI_THEME-error);
 	}
+
+	&.waiting {
+		color: var(--MI_THEME-accent);
+	}
 }
 
 .line {
@@ -87,6 +95,13 @@ const props = defineProps<{
 	transform: rotate(-90deg);
 }
 
+.animCircleWaiting {
+	stroke-dasharray: var(--l);
+	stroke-dashoffset: calc(var(--l) / 1.5);
+	animation: waiting 0.75s linear infinite;
+	transform-origin: center;
+}
+
 .animFade {
 	opacity: 0;
 	animation: fade-in var(--duration, 0.5s) cubic-bezier(0,0,.25,1) 1 forwards;
@@ -104,6 +119,15 @@ const props = defineProps<{
 	}
 }
 
+@keyframes waiting {
+	0% {
+		transform: rotate(0deg);
+	}
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
 @keyframes fade-in {
 	0% {
 		opacity: 0;
diff --git a/packages/frontend/src/pages/debug.vue b/packages/frontend/src/pages/debug.vue
index 4a28d513f5..5cd68c2c3a 100644
--- a/packages/frontend/src/pages/debug.vue
+++ b/packages/frontend/src/pages/debug.vue
@@ -23,6 +23,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<MkSystemIcon v-if="iconType === 'success'" type="success" style="width: 150px;"/>
 			<MkSystemIcon v-if="iconType === 'warn'" type="warn" style="width: 150px;"/>
 			<MkSystemIcon v-if="iconType === 'error'" type="error" style="width: 150px;"/>
+			<MkSystemIcon v-if="iconType === 'waiting'" type="waiting" style="width: 150px;"/>
 			<MkSelect
 				v-model="iconType" :items="[
 					{ label: 'info', value: 'info' },
@@ -30,6 +31,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 					{ label: 'success', value: 'success' },
 					{ label: 'warn', value: 'warn' },
 					{ label: 'error', value: 'error' },
+					{ label: 'waiting', value: 'waiting' },
 				]"
 			></MkSelect>
 

From 988ebb8aaa4224f997275a8581501b1e7e4af3a4 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 12:00:05 +0900
Subject: [PATCH 8/9] wip

---
 locales/index.d.ts                            | 10 ++++++
 locales/ja-JP.yml                             |  4 +++
 .../src/components/MkUploadDialog.vue         | 31 +++++++++++++++++--
 3 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/locales/index.d.ts b/locales/index.d.ts
index 3b27149cd8..c9f3ce3f5e 100644
--- a/locales/index.d.ts
+++ b/locales/index.d.ts
@@ -11902,6 +11902,16 @@ export interface Locale extends ILocale {
             "text3": string;
         };
     };
+    "_uploader": {
+        /**
+         * {x}に圧縮
+         */
+        "compressedToX": ParameterizedString<"x">;
+        /**
+         * {x}%節約
+         */
+        "savedXPercent": ParameterizedString<"x">;
+    };
 }
 declare const locales: {
     [lang: string]: Locale;
diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index 4c6e1f1e58..7045a6f46a 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -3182,3 +3182,7 @@ _serverSetupWizard:
     text1: "Misskeyは有志によって開発されている無料のソフトウェアです。"
     text2: "今後も開発を続けられるように、よろしければぜひカンパをお願いいたします。"
     text3: "支援者向け特典もあります！"
+
+_uploader:
+  compressedToX: "{x}に圧縮"
+  savedXPercent: "{x}%節約"
diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index 9dcdea2523..7bc2febbf6 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -17,7 +17,13 @@ SPDX-License-Identifier: AGPL-3.0-only
 
 	<div :class="$style.root" class="_gaps_s">
 		<div :class="$style.items" class="_gaps_s">
-			<div v-for="ctx in items" :key="ctx.id" v-panel :class="[$style.item, ctx.waiting ? $style.itemWaiting : null]" :style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }">
+			<div
+				v-for="ctx in items"
+				:key="ctx.id"
+				v-panel
+				:class="[$style.item, ctx.waiting ? $style.itemWaiting : null, ctx.uploaded ? $style.itemCompleted : null, ctx.uploadFailed ? $style.itemFailed : null]"
+				:style="{ '--p': ctx.progressValue !== null ? `${ctx.progressValue / ctx.progressMax * 100}%` : '0%' }"
+			>
 				<div :class="$style.itemInner">
 					<div>
 						<MkButton :iconOnly="true" rounded @click="showMenu($event, ctx)"><i class="ti ti-dots"></i></MkButton>
@@ -27,7 +33,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 						<div>{{ ctx.name }}</div>
 						<div :class="$style.itemInfo">
 							<span>{{ bytes(ctx.file.size) }}</span>
-							<span v-if="ctx.compressedSize">({{ bytes(ctx.compressedSize) }})</span>
+							<span v-if="ctx.compressedSize">({{ i18n.tsx._uploader.compressedToX({ x: bytes(ctx.compressedSize) }) }} = {{ i18n.tsx._uploader.savedXPercent({ x: Math.round((1 - ctx.compressedSize / ctx.file.size) * 100) }) }})</span>
 						</div>
 						<div>
 						</div>
@@ -181,6 +187,7 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 
 	for (const item of items.value.filter(item => item.uploaded == null)) {
 		item.waiting = true;
+		item.uploadFailed = false;
 
 		const shouldCompress = item.compressedImage == null && compressionLevel.value !== 0 && compressionSettings.value && compressionSupportedTypes.includes(item.file.type) && !(await isAnimated(item.file));
 
@@ -272,7 +279,7 @@ onMounted(() => {
 		width: var(--p);
 		height: 100%;
 		background: color(from var(--MI_THEME-accent) srgb r g b / 0.5);
-		transition: width 0.2s ease;
+		transition: width 0.2s ease, left 0.2s ease;
 	}
 
 	&.itemWaiting {
@@ -291,6 +298,23 @@ onMounted(() => {
 			animation: stripe .8s infinite linear;
 		}
 	}
+
+	&.itemCompleted {
+		&::before {
+			left: 100%;
+			width: var(--p);
+		}
+
+		.itemBody {
+			color: var(--MI_THEME-accent);
+		}
+	}
+
+	&.itemFailed {
+		.itemBody {
+			color: var(--MI_THEME-error);
+		}
+	}
 }
 
 @keyframes stripe {
@@ -310,6 +334,7 @@ onMounted(() => {
 .itemThumbnail {
 	width: 70px;
 	height: 70px;
+	background-color: var(--MI_THEME-bg);
 	background-size: contain;
 	background-position: center;
 	background-repeat: no-repeat;

From a2e1b8b41bbab341aef687ee91f0ac43de798818 Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Tue, 13 May 2025 12:03:07 +0900
Subject: [PATCH 9/9] Update MkUploadDialog.vue

---
 packages/frontend/src/components/MkUploadDialog.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/packages/frontend/src/components/MkUploadDialog.vue b/packages/frontend/src/components/MkUploadDialog.vue
index 7bc2febbf6..2051e565c4 100644
--- a/packages/frontend/src/components/MkUploadDialog.vue
+++ b/packages/frontend/src/components/MkUploadDialog.vue
@@ -39,9 +39,9 @@ SPDX-License-Identifier: AGPL-3.0-only
 						</div>
 					</div>
 					<div>
-						<MkSystemIcon v-if="ctx.uploading" type="waiting" style="width: 40px;"/>
-						<MkSystemIcon v-else-if="ctx.uploaded" type="success" style="width: 40px;"/>
-						<MkSystemIcon v-else-if="ctx.uploadFailed" type="error" style="width: 40px;"/>
+						<MkSystemIcon v-if="ctx.uploading" :class="$style.itemIcon" type="waiting"/>
+						<MkSystemIcon v-else-if="ctx.uploaded" :class="$style.itemIcon" type="success"/>
+						<MkSystemIcon v-else-if="ctx.uploadFailed" :class="$style.itemIcon" type="error"/>
 					</div>
 				</div>
 			</div>
@@ -359,4 +359,8 @@ onMounted(() => {
 	display: flex;
 	gap: 8px;
 }
+
+.itemIcon {
+	width: 35px;
+}
 </style>