From 151586ab602794914be281aab6db5589d9c9c9d8 Mon Sep 17 00:00:00 2001 From: syuilo Date: Mon, 8 May 2023 08:52:01 +0900 Subject: [PATCH] refactor --- packages/frontend/src/components/MkSample.vue | 2 +- packages/frontend/src/os.ts | 5 +- .../page-editor/els/page-editor.el.image.vue | 4 +- packages/frontend/src/scripts/select-file.ts | 140 +++++++++--------- 4 files changed, 79 insertions(+), 72 deletions(-) diff --git a/packages/frontend/src/components/MkSample.vue b/packages/frontend/src/components/MkSample.vue index 7a3bc20888..922b862b47 100644 --- a/packages/frontend/src/components/MkSample.vue +++ b/packages/frontend/src/components/MkSample.vue @@ -87,7 +87,7 @@ export default defineComponent({ }, async openDrive() { - os.selectDriveFile(); + os.selectDriveFile(false); }, async selectUser() { diff --git a/packages/frontend/src/os.ts b/packages/frontend/src/os.ts index 67acee5aca..c4f9d47d7d 100644 --- a/packages/frontend/src/os.ts +++ b/packages/frontend/src/os.ts @@ -19,6 +19,7 @@ import MkContextMenu from '@/components/MkContextMenu.vue'; import { MenuItem } from '@/types/menu'; import copyToClipboard from './scripts/copy-to-clipboard'; import { showMovedDialog } from './scripts/show-moved-dialog'; +import { DriveFile } from 'misskey-js/built/entities'; export const openingWindowsCount = ref(0); @@ -420,7 +421,7 @@ export async function selectUser(opts: { includeSelf?: boolean } = {}) { }); } -export async function selectDriveFile(multiple: boolean) { +export async function selectDriveFile(multiple: boolean): Promise { return new Promise((resolve, reject) => { popup(defineAsyncComponent(() => import('@/components/MkDriveSelectDialog.vue')), { type: 'file', @@ -428,7 +429,7 @@ export async function selectDriveFile(multiple: boolean) { }, { done: files => { if (files) { - resolve(multiple ? files : files[0]); + resolve(files); } }, }, 'closed'); diff --git a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue index ffeb8ba285..e97a4b07f1 100644 --- a/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue +++ b/packages/frontend/src/pages/page-editor/els/page-editor.el.image.vue @@ -33,8 +33,8 @@ const emit = defineEmits<{ let file: any = $ref(null); async function choose() { - os.selectDriveFile(false).then((fileResponse: any) => { - file = fileResponse; + os.selectDriveFile(false).then((fileResponse) => { + file = fileResponse[0]; emit('update:modelValue', { ...props.modelValue, fileId: fileResponse.id, diff --git a/packages/frontend/src/scripts/select-file.ts b/packages/frontend/src/scripts/select-file.ts index ec5f8f65e9..fe9f0a2447 100644 --- a/packages/frontend/src/scripts/select-file.ts +++ b/packages/frontend/src/scripts/select-file.ts @@ -6,71 +6,77 @@ import { i18n } from '@/i18n'; import { defaultStore } from '@/store'; import { uploadFile } from '@/scripts/upload'; -function select(src: any, label: string | null, multiple: boolean): Promise { +export function chooseFileFromPc(multiple: boolean, keepOriginal = false): Promise { + return new Promise((res, rej) => { + const input = document.createElement('input'); + input.type = 'file'; + input.multiple = multiple; + input.onchange = () => { + const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal)); + + Promise.all(promises).then(driveFiles => { + res(driveFiles); + }).catch(err => { + // アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない + }); + + // 一応廃棄 + (window as any).__misskey_input_ref__ = null; + }; + + // https://qiita.com/fukasawah/items/b9dc732d95d99551013d + // iOS Safari で正常に動かす為のおまじない + (window as any).__misskey_input_ref__ = input; + + input.click(); + }); +} + +export function chooseFileFromDrive(multiple: boolean): Promise { + return new Promise((res, rej) => { + os.selectDriveFile(multiple).then(files => { + res(files); + }); + }); +} + +export function chooseFileFromUrl(): Promise { + return new Promise((res, rej) => { + os.inputText({ + title: i18n.ts.uploadFromUrl, + type: 'url', + placeholder: i18n.ts.uploadFromUrlDescription, + }).then(({ canceled, result: url }) => { + if (canceled) return; + + const marker = Math.random().toString(); // TODO: UUIDとか使う + + const connection = stream.useChannel('main'); + connection.on('urlUploadFinished', urlResponse => { + if (urlResponse.marker === marker) { + res(urlResponse.file); + connection.dispose(); + } + }); + + os.api('drive/files/upload-from-url', { + url: url, + folderId: defaultStore.state.uploadFolder, + marker, + }); + + os.alert({ + title: i18n.ts.uploadFromUrlRequested, + text: i18n.ts.uploadFromUrlMayTakeTime, + }); + }); + }); +} + +function select(src: any, label: string | null, multiple: boolean): Promise { return new Promise((res, rej) => { const keepOriginal = ref(defaultStore.state.keepOriginalUploading); - const chooseFileFromPc = () => { - const input = document.createElement('input'); - input.type = 'file'; - input.multiple = multiple; - input.onchange = () => { - const promises = Array.from(input.files).map(file => uploadFile(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value)); - - Promise.all(promises).then(driveFiles => { - res(multiple ? driveFiles : driveFiles[0]); - }).catch(err => { - // アップロードのエラーは uploadFile 内でハンドリングされているためアラートダイアログを出したりはしてはいけない - }); - - // 一応廃棄 - (window as any).__misskey_input_ref__ = null; - }; - - // https://qiita.com/fukasawah/items/b9dc732d95d99551013d - // iOS Safari で正常に動かす為のおまじない - (window as any).__misskey_input_ref__ = input; - - input.click(); - }; - - const chooseFileFromDrive = () => { - os.selectDriveFile(multiple).then(files => { - res(files); - }); - }; - - const chooseFileFromUrl = () => { - os.inputText({ - title: i18n.ts.uploadFromUrl, - type: 'url', - placeholder: i18n.ts.uploadFromUrlDescription, - }).then(({ canceled, result: url }) => { - if (canceled) return; - - const marker = Math.random().toString(); // TODO: UUIDとか使う - - const connection = stream.useChannel('main'); - connection.on('urlUploadFinished', urlResponse => { - if (urlResponse.marker === marker) { - res(multiple ? [urlResponse.file] : urlResponse.file); - connection.dispose(); - } - }); - - os.api('drive/files/upload-from-url', { - url: url, - folderId: defaultStore.state.uploadFolder, - marker, - }); - - os.alert({ - title: i18n.ts.uploadFromUrlRequested, - text: i18n.ts.uploadFromUrlMayTakeTime, - }); - }); - }; - os.popupMenu([label ? { text: label, type: 'label', @@ -81,23 +87,23 @@ function select(src: any, label: string | null, multiple: boolean): Promise chooseFileFromPc(multiple, keepOriginal.value).then(files => res(files)), }, { text: i18n.ts.fromDrive, icon: 'ti ti-cloud', - action: chooseFileFromDrive, + action: () => chooseFileFromDrive(multiple).then(files => res(files)), }, { text: i18n.ts.fromUrl, icon: 'ti ti-link', - action: chooseFileFromUrl, + action: () => chooseFileFromUrl().then(file => res([file])), }], src); }); } export function selectFile(src: any, label: string | null = null): Promise { - return select(src, label, false) as Promise; + return select(src, label, false).then(files => files[0]); } export function selectFiles(src: any, label: string | null = null): Promise { - return select(src, label, true) as Promise; + return select(src, label, true); }