enhance(frontend): ファイルのアップロードを中止できるように

locales/index.d.ts

@@ -5449,6 +5449,10 @@ export interface Locale extends ILocale {
      * {x}のミュートを解除
      */
     "unmuteX": ParameterizedString<"x">;
+    /**
+     * 中止
+     */
+    "abort": string;
     "_chat": {
         /**
          * まだメッセージはありません

locales/ja-JP.yml

@@ -1357,6 +1357,7 @@ emojiMute: "絵文字ミュート"
 emojiUnmute: "絵文字ミュート解除"
 muteX: "{x}をミュート"
 unmuteX: "{x}のミュートを解除"
+abort: "中止"
 
 _chat:
   noMessagesYet: "まだメッセージはありません"

packages/frontend/src/components/MkModalWindow.vue

@@ -130,7 +130,7 @@ defineExpose({
 }
 
 .footer {
-	padding: 8px 16px;
+	padding: 12px 16px;
 	overflow: auto;
 	background: var(--MI_THEME-bg);
 	border-top: 1px solid var(--MI_THEME-divider);

packages/frontend/src/components/MkUploaderDialog.vue

@@ -18,8 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
 	<div :class="$style.root">
 		<div :class="[$style.overallProgress, canRetry ? $style.overallProgressError : null]" :style="{ '--op': `${overallProgress}%` }"></div>
 
-		<div :class="$style.main" class="_gaps_s">
+		<div class="_gaps_s _spacer">
-			<div :class="$style.items" class="_gaps_s">
+			<div class="_gaps_s">
 				<div
 					v-for="ctx in items"
 					:key="ctx.id"
@@ -96,7 +96,6 @@ import { i18n } from '@/i18n.js';
 import { prefer } from '@/preferences.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';
 import { isWebpSupported } from '@/utility/isWebpSupported.js';
 import { uploadFile } from '@/utility/drive.js';
@@ -138,7 +137,7 @@ const emit = defineEmits<{
 	(ev: 'closed'): void;
 }>();
 
-const items = ref([] as {
+const items = ref<{
 	id: string;
 	name: string;
 	progress: { max: number; value: number } | null;
@@ -150,7 +149,8 @@ const items = ref([] as {
 	compressedSize?: number | null;
 	compressedImage?: Blob | null;
 	file: File;
-}[]);
+	abort?: (() => void) | null;
+}[]>([]);
 
 const dialog = useTemplateRef('dialog');
 
@@ -258,6 +258,17 @@ function showMenu(ev: MouseEvent, item: typeof items.value[0]) {
 				items.value.splice(items.value.indexOf(item), 1);
 			},
 		});
+	} else if (item.uploading) {
+		menu.push({
+			icon: 'ti ti-cloud-pause',
+			text: i18n.ts.abort,
+			danger: true,
+			action: () => {
+				if (item.abort != null) {
+					item.abort();
+				}
+			}
+		});
 	}
 
 	os.popupMenu(menu, ev.currentTarget ?? ev.target);
@@ -296,7 +307,7 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 
 		item.uploading = true;
 
-		const driveFile = await uploadFile(item.compressedImage ?? item.file, {
+		const { filePromise, abort } = uploadFile(item.compressedImage ?? item.file, {
 			name: item.name,
 			folderId: props.folderId,
 			onProgress: (progress) => {
@@ -308,6 +319,19 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 					item.progress.max = progress.total;
 				}
 			},
+		});
+
+		item.abort = () => {
+			item.abort = null;
+			abort();
+			item.uploading = false;
+			item.waiting = false;
+			item.uploadFailed = true;
+		};
+
+		await filePromise.then((file) => {
+			item.uploaded = file;
+			item.abort = null;
 		}).catch(err => {
 			item.uploadFailed = true;
 			item.progress = null;
@@ -316,8 +340,6 @@ async function upload() { // エラーハンドリングなどを考慮してシ
 			item.uploading = false;
 			item.waiting = false;
 		});
-
-		item.uploaded = driveFile;
 	}
 }
 
@@ -373,13 +395,6 @@ onMounted(() => {
 	}
 }
 
-.main {
-	padding: 12px;
-}
-
-.items {
-}
-
 .item {
 	position: relative;
 	border-radius: 10px;

packages/frontend/src/utility/drive.ts

@@ -16,12 +16,19 @@ import { instance } from '@/instance.js';
 import { globalEvents } from '@/events.js';
 import { getProxiedImageUrl } from '@/utility/media-proxy.js';
 
+type UploadReturnType = {
+	filePromise: Promise<Misskey.entities.DriveFile>;
+	abort: () => void;
+};
+
 export function uploadFile(file: File | Blob, options: {
 	name?: string;
 	folderId?: string | null;
 	onProgress?: (ctx: { total: number; loaded: number; }) => void;
-} = {}): Promise<Misskey.entities.DriveFile> {
+} = {}): UploadReturnType {
-	return new Promise((resolve, reject) => {
+	const xhr = new XMLHttpRequest();
+
+	const filePromise = new Promise<Misskey.entities.DriveFile>((resolve, reject) => {
 		if ($i == null) return reject();
 
 		if ((file.size > instance.maxFileSize) || (file.size > ($i.policies.maxFileSizeMb * 1024 * 1024))) {
@@ -33,7 +40,6 @@ export function uploadFile(file: File | Blob, options: {
 			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) {
@@ -83,7 +89,7 @@ export function uploadFile(file: File | Blob, options: {
 
 		if (options.onProgress) {
 			xhr.upload.onprogress = ev => {
-				if (ev.lengthComputable) {
+				if (ev.lengthComputable && options.onProgress != null) {
 					options.onProgress({
 						total: ev.total,
 						loaded: ev.loaded,
@@ -96,11 +102,17 @@ export function uploadFile(file: File | Blob, options: {
 		formData.append('i', $i.token);
 		formData.append('force', 'true');
 		formData.append('file', file);
-		formData.append('name', options.name ?? file.name ?? 'untitled');
+		formData.append('name', options.name ?? (file instanceof File ? file.name : 'untitled'));
 		if (options.folderId) formData.append('folderId', options.folderId);
 
 		xhr.send(formData);
 	});
+
+	const abort = () => {
+		xhr.abort();
+	};
+
+	return { filePromise, abort };
 }
 
 export function chooseFileFromPcAndUpload(
@@ -126,7 +138,7 @@ export function chooseDriveFile(options: {
 } = {}): Promise<Misskey.entities.DriveFile[]> {
 	return new Promise(resolve => {
 		const { dispose } = os.popup(defineAsyncComponent(() => import('@/components/MkDriveFileSelectDialog.vue')), {
-			multiple: options.multiple,
+			multiple: options.multiple ?? false,
 		}, {
 			done: files => {
 				if (files) {
@@ -204,7 +216,7 @@ export function selectFiles(src: HTMLElement | EventTarget | null, label: string
 export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFile: Misskey.entities.DriveFile, options: {
 	aspectRatio: number | null;
 }): Promise<Misskey.entities.DriveFile> {
-	return new Promise(resolve => {
+	return new Promise((resolve, reject) => {
 		const imgUrl = getProxiedImageUrl(imageDriveFile.url, undefined, true);
 		const image = new Image();
 		image.src = imgUrl;
@@ -215,13 +227,20 @@ export async function createCroppedImageDriveFileFromImageDriveFile(imageDriveFi
 			canvas.height = image.height;
 			ctx.drawImage(image, 0, 0);
 			canvas.toBlob(blob => {
+				if (blob == null) {
+					reject();
+					return;
+				}
+
 				os.cropImageFile(blob, {
 					aspectRatio: options.aspectRatio,
 				}).then(croppedImageFile => {
-					uploadFile(croppedImageFile, {
+					const { filePromise } = uploadFile(croppedImageFile, {
 						name: imageDriveFile.name,
 						folderId: imageDriveFile.folderId,
-					}).then(driveFile => {
+					});
+
+					filePromise.then(driveFile => {
 						resolve(driveFile);
 					});
 				});