diff --git a/locales/index.d.ts b/locales/index.d.ts index 3643c2e7e9..58e531aac4 100644 --- a/locales/index.d.ts +++ b/locales/index.d.ts @@ -5449,6 +5449,10 @@ export interface Locale extends ILocale { * {x}のミュートを解除 */ "unmuteX": ParameterizedString<"x">; + /** + * 中止 + */ + "abort": string; "_chat": { /** * まだメッセージはありません diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml index fe23ce0a3c..d07fad16d6 100644 --- a/locales/ja-JP.yml +++ b/locales/ja-JP.yml @@ -1357,6 +1357,7 @@ emojiMute: "絵文字ミュート" emojiUnmute: "絵文字ミュート解除" muteX: "{x}をミュート" unmuteX: "{x}のミュートを解除" +abort: "中止" _chat: noMessagesYet: "まだメッセージはありません" diff --git a/packages/frontend/src/components/MkModalWindow.vue b/packages/frontend/src/components/MkModalWindow.vue index 6b81e353e6..fd4262c17d 100644 --- a/packages/frontend/src/components/MkModalWindow.vue +++ b/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); diff --git a/packages/frontend/src/components/MkUploaderDialog.vue b/packages/frontend/src/components/MkUploaderDialog.vue index 3a83247d4b..8db5f6569f 100644 --- a/packages/frontend/src/components/MkUploaderDialog.vue +++ b/packages/frontend/src/components/MkUploaderDialog.vue @@ -18,8 +18,8 @@ SPDX-License-Identifier: AGPL-3.0-only
-
-
+
+
(); -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; diff --git a/packages/frontend/src/utility/drive.ts b/packages/frontend/src/utility/drive.ts index e29b010c81..cd986e7942 100644 --- a/packages/frontend/src/utility/drive.ts +++ b/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; + abort: () => void; +}; + export function uploadFile(file: File | Blob, options: { name?: string; folderId?: string | null; onProgress?: (ctx: { total: number; loaded: number; }) => void; -} = {}): Promise { - return new Promise((resolve, reject) => { +} = {}): UploadReturnType { + const xhr = new XMLHttpRequest(); + + const filePromise = new Promise((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) => { 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 { 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 { - 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); }); });