Compare commits
	
		
			33 commits
		
	
	
		
			develop
			...
			better-817
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
|  | 7102e43e1e | ||
|  | fdb17e08b9 | ||
|  | e7d9221a71 | ||
|  | e87e97fce4 | ||
|  | ee6e1633ef | ||
|  | 599510c5be | ||
|  | 6a000b3184 | ||
|  | 39f0eb134d | ||
|  | 49052992d6 | ||
|  | 2b7ec306f9 | ||
|  | 7b4f5acc55 | ||
|  | 8a5fdd159d | ||
|  | 0133902168 | ||
|  | af42693ea1 | ||
|  | d42c9854fc | ||
|  | 4fdec4015b | ||
|  | 38f84a94ba | ||
|  | 8a32cedf6e | ||
|  | 0f8f7de165 | ||
|  | 35845bc090 | ||
|  | 3236ebac6b | ||
|  | 8fcf86cb52 | ||
|  | 1ce9e920ff | ||
|  | 32dd3bf842 | ||
|  | 08023060e6 | ||
|  | 323d020caf | ||
|  | 0ed6f4d86c | ||
|  | bb67923fa8 | ||
|  | 8da8329b51 | ||
|  | 0a788d1df1 | ||
|  | ed5805e5af | ||
|  | bb11a37d1a | ||
|  | 4d4ac5dda5 | 
					 17 changed files with 185 additions and 127 deletions
				
			
		|  | @ -63,7 +63,7 @@ export async function populateEmoji(emojiName: string, noteUserHost: string | nu | |||
| 
 | ||||
| 	const isLocal = emoji.host == null; | ||||
| 	const emojiUrl = emoji.publicUrl || emoji.originalUrl; // || emoji.originalUrl してるのは後方互換性のため
 | ||||
| 	const url = isLocal ? emojiUrl : `${config.url}/proxy/image.png?${query({ url: emojiUrl })}`; | ||||
| 	const url = isLocal ? emojiUrl : `${config.url}/proxy/${encodeURIComponent((new URL(emojiUrl)).pathname)}?${query({ url: emojiUrl })}`; | ||||
| 
 | ||||
| 	return { | ||||
| 		name: emojiName, | ||||
|  |  | |||
|  | @ -11,7 +11,7 @@ import { DriveFiles } from '@/models/index'; | |||
| import { InternalStorage } from '@/services/drive/internal-storage'; | ||||
| import { downloadUrl } from '@/misc/download-url'; | ||||
| import { detectType } from '@/misc/get-file-info'; | ||||
| import { convertToJpeg, convertToPng, convertToPngOrJpeg } from '@/services/drive/image-processor'; | ||||
| import { convertToWebp, convertToJpeg, convertToPng } from '@/services/drive/image-processor'; | ||||
| import { GenerateVideoThumbnail } from '@/services/drive/generate-video-thumbnail'; | ||||
| import { StatusError } from '@/misc/fetch'; | ||||
| import { FILE_TYPE_BROWSERSAFE } from '@/const'; | ||||
|  | @ -65,10 +65,8 @@ export default async function(ctx: Koa.Context) { | |||
| 
 | ||||
| 				const convertFile = async () => { | ||||
| 					if (isThumbnail) { | ||||
| 						if (['image/jpeg', 'image/webp'].includes(mime)) { | ||||
| 							return await convertToJpeg(path, 498, 280); | ||||
| 						} else if (['image/png', 'image/svg+xml'].includes(mime)) { | ||||
| 							return await convertToPngOrJpeg(path, 498, 280); | ||||
| 						if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(mime)) { | ||||
| 							return await convertToWebp(path, 498, 280); | ||||
| 						} else if (mime.startsWith('video/')) { | ||||
| 							return await GenerateVideoThumbnail(path); | ||||
| 						} | ||||
|  |  | |||
|  | @ -1,7 +1,7 @@ | |||
| import * as fs from 'fs'; | ||||
| import * as Koa from 'koa'; | ||||
| import { serverLogger } from '../index'; | ||||
| import { IImage, convertToPng, convertToJpeg } from '@/services/drive/image-processor'; | ||||
| import { IImage, convertToWebp } from '@/services/drive/image-processor'; | ||||
| import { createTemp } from '@/misc/create-temp'; | ||||
| import { downloadUrl } from '@/misc/download-url'; | ||||
| import { detectType } from '@/misc/get-file-info'; | ||||
|  | @ -27,11 +27,11 @@ export async function proxyMedia(ctx: Koa.Context) { | |||
| 		let image: IImage; | ||||
| 
 | ||||
| 		if ('static' in ctx.query && ['image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/webp', 'image/svg+xml'].includes(mime)) { | ||||
| 			image = await convertToPng(path, 498, 280); | ||||
| 			image = await convertToWebp(path, 498, 280); | ||||
| 		} else if ('preview' in ctx.query && ['image/jpeg', 'image/png', 'image/gif', 'image/apng', 'image/vnd.mozilla.apng', 'image/svg+xml'].includes(mime)) { | ||||
| 			image = await convertToJpeg(path, 200, 200); | ||||
| 			image = await convertToWebp(path, 200, 200); | ||||
| 		}	else if (['image/svg+xml'].includes(mime)) { | ||||
| 			image = await convertToPng(path, 2048, 2048); | ||||
| 			image = await convertToWebp(path, 2048, 2048, 1); | ||||
| 		} else if (!mime.startsWith('image/') || !FILE_TYPE_BROWSERSAFE.includes(mime)) { | ||||
| 			throw new StatusError('Rejected type', 403, 'Rejected type'); | ||||
| 		} else { | ||||
|  |  | |||
|  | @ -56,7 +56,7 @@ module.exports = async (ctx: Koa.Context) => { | |||
| function wrap(url?: string): string | null { | ||||
| 	return url != null | ||||
| 		? url.match(/^https?:\/\//) | ||||
| 			? `${config.url}/proxy/preview.jpg?${query({ | ||||
| 			? `${config.url}/proxy/preview.webp?${query({ | ||||
| 				url, | ||||
| 				preview: '1', | ||||
| 			})}` | ||||
|  |  | |||
|  | @ -7,7 +7,7 @@ import { deleteFile } from './delete-file'; | |||
| import { fetchMeta } from '@/misc/fetch-meta'; | ||||
| import { GenerateVideoThumbnail } from './generate-video-thumbnail'; | ||||
| import { driveLogger } from './logger'; | ||||
| import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng, convertSharpToPngOrJpeg } from './image-processor'; | ||||
| import { IImage, convertSharpToJpeg, convertSharpToWebp, convertSharpToPng } from './image-processor'; | ||||
| import { contentDisposition } from '@/misc/content-disposition'; | ||||
| import { getFileInfo } from '@/misc/get-file-info'; | ||||
| import { DriveFiles, DriveFolders, Users, Instances, UserProfiles } from '@/models/index'; | ||||
|  | @ -178,6 +178,7 @@ export async function generateAlts(path: string, type: string, generateWeb: bool | |||
| 	} | ||||
| 
 | ||||
| 	let img: sharp.Sharp | null = null; | ||||
| 	let satisfyWebpublic: boolean; | ||||
| 
 | ||||
| 	try { | ||||
| 		img = sharp(path); | ||||
|  | @ -191,6 +192,13 @@ export async function generateAlts(path: string, type: string, generateWeb: bool | |||
| 				thumbnail: null, | ||||
| 			}; | ||||
| 		} | ||||
| 
 | ||||
| 		satisfyWebpublic = !!( | ||||
| 			type !== 'image/svg+xml' && type !== 'image/webp' && | ||||
| 			!(metadata.exif || metadata.iptc || metadata.xmp || metadata.tifftagPhotoshop) && | ||||
| 			metadata.width && metadata.width <= 2048 && | ||||
| 			metadata.height && metadata.height <= 2048 | ||||
| 		); | ||||
| 	} catch (err) { | ||||
| 		logger.warn(`sharp failed: ${err}`); | ||||
| 		return { | ||||
|  | @ -202,15 +210,15 @@ export async function generateAlts(path: string, type: string, generateWeb: bool | |||
| 	// #region webpublic
 | ||||
| 	let webpublic: IImage | null = null; | ||||
| 
 | ||||
| 	if (generateWeb) { | ||||
| 	if (generateWeb && !satisfyWebpublic) { | ||||
| 		logger.info(`creating web image`); | ||||
| 
 | ||||
| 		try { | ||||
| 			if (['image/jpeg'].includes(type)) { | ||||
| 			if (['image/jpeg', 'image/webp'].includes(type)) { | ||||
| 				webpublic = await convertSharpToJpeg(img, 2048, 2048); | ||||
| 			} else if (['image/webp'].includes(type)) { | ||||
| 				webpublic = await convertSharpToWebp(img, 2048, 2048); | ||||
| 			} else if (['image/png', 'image/svg+xml'].includes(type)) { | ||||
| 			} else if (['image/png'].includes(type)) { | ||||
| 				webpublic = await convertSharpToPng(img, 2048, 2048); | ||||
| 			} else if (['image/svg+xml'].includes(type)) { | ||||
| 				webpublic = await convertSharpToPng(img, 2048, 2048); | ||||
| 			} else { | ||||
| 				logger.debug(`web image not created (not an required image)`); | ||||
|  | @ -219,7 +227,8 @@ export async function generateAlts(path: string, type: string, generateWeb: bool | |||
| 			logger.warn(`web image not created (an error occured)`, err as Error); | ||||
| 		} | ||||
| 	} else { | ||||
| 		logger.info(`web image not created (from remote)`); | ||||
| 		if (satisfyWebpublic) logger.info(`web image not created (original satisfies webpublic)`); | ||||
| 		else logger.info(`web image not created (from remote)`); | ||||
| 	} | ||||
| 	// #endregion webpublic
 | ||||
| 
 | ||||
|  | @ -227,10 +236,8 @@ export async function generateAlts(path: string, type: string, generateWeb: bool | |||
| 	let thumbnail: IImage | null = null; | ||||
| 
 | ||||
| 	try { | ||||
| 		if (['image/jpeg', 'image/webp'].includes(type)) { | ||||
| 			thumbnail = await convertSharpToJpeg(img, 498, 280); | ||||
| 		} else if (['image/png', 'image/svg+xml'].includes(type)) { | ||||
| 			thumbnail = await convertSharpToPngOrJpeg(img, 498, 280); | ||||
| 		if (['image/jpeg', 'image/webp', 'image/png', 'image/svg+xml'].includes(type)) { | ||||
| 			thumbnail = await convertSharpToWebp(img, 498, 280); | ||||
| 		} else { | ||||
| 			logger.debug(`thumbnail not created (not an required file)`); | ||||
| 		} | ||||
|  |  | |||
|  | @ -27,6 +27,7 @@ export async function GenerateVideoThumbnail(path: string): Promise<IImage> { | |||
| 
 | ||||
| 	const outPath = `${outDir}/output.png`; | ||||
| 
 | ||||
| 	// JPEGに変換 (Webpでもいいが、MastodonはWebpをサポートせず表示できなくなる)
 | ||||
| 	const thumbnail = await convertToJpeg(outPath, 498, 280); | ||||
| 
 | ||||
| 	// cleanup
 | ||||
|  |  | |||
|  | @ -38,11 +38,11 @@ export async function convertSharpToJpeg(sharp: sharp.Sharp, width: number, heig | |||
|  * Convert to WebP | ||||
|  *   with resize, remove metadata, resolve orientation, stop animation | ||||
|  */ | ||||
| export async function convertToWebp(path: string, width: number, height: number): Promise<IImage> { | ||||
| 	return convertSharpToWebp(await sharp(path), width, height); | ||||
| export async function convertToWebp(path: string, width: number, height: number, quality: number = 85): Promise<IImage> { | ||||
| 	return convertSharpToWebp(await sharp(path), width, height, quality); | ||||
| } | ||||
| 
 | ||||
| export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> { | ||||
| export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, height: number, quality: number = 85): Promise<IImage> { | ||||
| 	const data = await sharp | ||||
| 		.resize(width, height, { | ||||
| 			fit: 'inside', | ||||
|  | @ -50,7 +50,7 @@ export async function convertSharpToWebp(sharp: sharp.Sharp, width: number, heig | |||
| 		}) | ||||
| 		.rotate() | ||||
| 		.webp({ | ||||
| 			quality: 85, | ||||
| 			quality, | ||||
| 		}) | ||||
| 		.toBuffer(); | ||||
| 
 | ||||
|  | @ -85,23 +85,3 @@ export async function convertSharpToPng(sharp: sharp.Sharp, width: number, heigh | |||
| 		type: 'image/png', | ||||
| 	}; | ||||
| } | ||||
| 
 | ||||
| /** | ||||
|  * Convert to PNG or JPEG | ||||
|  *   with resize, remove metadata, resolve orientation, stop animation | ||||
|  */ | ||||
| export async function convertToPngOrJpeg(path: string, width: number, height: number): Promise<IImage> { | ||||
| 	return convertSharpToPngOrJpeg(await sharp(path), width, height); | ||||
| } | ||||
| 
 | ||||
| export async function convertSharpToPngOrJpeg(sharp: sharp.Sharp, width: number, height: number): Promise<IImage> { | ||||
| 	const stats = await sharp.stats(); | ||||
| 	const metadata = await sharp.metadata(); | ||||
| 
 | ||||
| 	// 不透明で300x300pxの範囲を超えていればJPEG
 | ||||
| 	if (stats.isOpaque && ((metadata.width && metadata.width >= 300) || (metadata.height && metadata!.height >= 300))) { | ||||
| 		return await convertSharpToJpeg(sharp, width, height); | ||||
| 	} else { | ||||
| 		return await convertSharpToPng(sharp, width, height); | ||||
| 	} | ||||
| } | ||||
|  |  | |||
|  | @ -44,6 +44,7 @@ | |||
| 		"autwh": "0.1.0", | ||||
| 		"blurhash": "1.1.4", | ||||
| 		"broadcast-channel": "4.9.0", | ||||
| 		"browser-image-resizer": "2.2.1", | ||||
| 		"chart.js": "3.7.0", | ||||
| 		"chartjs-adapter-date-fns": "2.0.0", | ||||
| 		"chartjs-plugin-zoom": "1.2.0", | ||||
|  |  | |||
|  | @ -97,6 +97,7 @@ import * as os from '@/os'; | |||
| import { stream } from '@/stream'; | ||||
| import { defaultStore } from '@/store'; | ||||
| import { i18n } from '@/i18n'; | ||||
| import { uploadFile, uploads } from '@/scripts/upload'; | ||||
| 
 | ||||
| const props = withDefaults(defineProps<{ | ||||
| 	initialFolder?: Misskey.entities.DriveFolder; | ||||
|  | @ -127,8 +128,9 @@ const moreFolders = ref(false); | |||
| const hierarchyFolders = ref<Misskey.entities.DriveFolder[]>([]); | ||||
| const selectedFiles = ref<Misskey.entities.DriveFile[]>([]); | ||||
| const selectedFolders = ref<Misskey.entities.DriveFolder[]>([]); | ||||
| const uploadings = os.uploads; | ||||
| const uploadings = uploads; | ||||
| const connection = stream.useChannel('drive'); | ||||
| const keepOriginal = ref<boolean>(defaultStore.state.keepOriginalUploading); // 外部渡しが多いので$refは使わないほうがよい | ||||
| 
 | ||||
| // ドロップされようとしているか | ||||
| const draghover = ref(false); | ||||
|  | @ -355,7 +357,7 @@ function onChangeFileInput() { | |||
| } | ||||
| 
 | ||||
| function upload(file: File, folderToUpload?: Misskey.entities.DriveFolder | null) { | ||||
| 	os.upload(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null).then(res => { | ||||
| 	uploadFile(file, (folderToUpload && typeof folderToUpload == 'object') ? folderToUpload.id : null, undefined, keepOriginal.value).then(res => { | ||||
| 		addFile(res, true); | ||||
| 	}); | ||||
| } | ||||
|  | @ -562,6 +564,10 @@ function fetchMoreFiles() { | |||
| 
 | ||||
| function getMenu() { | ||||
| 	return [{ | ||||
| 		type: 'switch', | ||||
| 		text: i18n.ts.keepOriginalUploading, | ||||
| 		ref: keepOriginal, | ||||
| 	}, null, { | ||||
| 		text: i18n.ts.addFile, | ||||
| 		type: 'label' | ||||
| 	}, { | ||||
|  |  | |||
|  | @ -87,6 +87,7 @@ import MkInfo from '@/components/ui/info.vue'; | |||
| import { i18n } from '@/i18n'; | ||||
| import { instance } from '@/instance'; | ||||
| import { $i, getAccounts, openAccountMenu as openAccountMenu_ } from '@/account'; | ||||
| import { uploadFile } from '@/scripts/upload'; | ||||
| 
 | ||||
| const modal = inject('modal'); | ||||
| 
 | ||||
|  | @ -369,7 +370,7 @@ function updateFileName(file, name) { | |||
| } | ||||
| 
 | ||||
| function upload(file: File, name?: string) { | ||||
| 	os.upload(file, defaultStore.state.uploadFolder, name).then(res => { | ||||
| 	uploadFile(file, defaultStore.state.uploadFolder, name).then(res => { | ||||
| 		files.push(res); | ||||
| 	}); | ||||
| } | ||||
|  |  | |||
|  | @ -1,6 +1,6 @@ | |||
| // TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
 | ||||
| 
 | ||||
| import { Component, defineAsyncComponent, markRaw, reactive, Ref, ref } from 'vue'; | ||||
| import { Component, markRaw, Ref, ref } from 'vue'; | ||||
| import { EventEmitter } from 'eventemitter3'; | ||||
| import insertTextAtCursor from 'insert-text-at-cursor'; | ||||
| import * as Misskey from 'misskey-js'; | ||||
|  | @ -10,7 +10,6 @@ import MkWaitingDialog from '@/components/waiting-dialog.vue'; | |||
| import { MenuItem } from '@/types/menu'; | ||||
| import { resolve } from '@/router'; | ||||
| import { $i } from '@/account'; | ||||
| import { defaultStore } from '@/store'; | ||||
| 
 | ||||
| export const pendingApiRequestsCount = ref(0); | ||||
| 
 | ||||
|  | @ -535,78 +534,6 @@ export function post(props: Record<string, any> = {}) { | |||
| 
 | ||||
| export const deckGlobalEvents = new EventEmitter(); | ||||
| 
 | ||||
| export const uploads = ref<{ | ||||
| 	id: string; | ||||
| 	name: string; | ||||
| 	progressMax: number | undefined; | ||||
| 	progressValue: number | undefined; | ||||
| 	img: string; | ||||
| }[]>([]); | ||||
| 
 | ||||
| export function upload(file: File, folder?: any, name?: string, keepOriginal: boolean = defaultStore.state.keepOriginalUploading): Promise<Misskey.entities.DriveFile> { | ||||
| 	if (folder && typeof folder == 'object') folder = folder.id; | ||||
| 
 | ||||
| 	return new Promise((resolve, reject) => { | ||||
| 		const id = Math.random().toString(); | ||||
| 
 | ||||
| 		const reader = new FileReader(); | ||||
| 		reader.onload = (e) => { | ||||
| 			const ctx = reactive({ | ||||
| 				id: id, | ||||
| 				name: name || file.name || 'untitled', | ||||
| 				progressMax: undefined, | ||||
| 				progressValue: undefined, | ||||
| 				img: window.URL.createObjectURL(file) | ||||
| 			}); | ||||
| 
 | ||||
| 			uploads.value.push(ctx); | ||||
| 
 | ||||
| 			console.log(keepOriginal); | ||||
| 
 | ||||
| 			const data = new FormData(); | ||||
| 			data.append('i', $i.token); | ||||
| 			data.append('force', 'true'); | ||||
| 			data.append('file', file); | ||||
| 
 | ||||
| 			if (folder) data.append('folderId', folder); | ||||
| 			if (name) data.append('name', name); | ||||
| 
 | ||||
| 			const xhr = new XMLHttpRequest(); | ||||
| 			xhr.open('POST', apiUrl + '/drive/files/create', true); | ||||
| 			xhr.onload = (ev) => { | ||||
| 				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) { | ||||
| 					// TODO: 消すのではなくて再送できるようにしたい
 | ||||
| 					uploads.value = uploads.value.filter(x => x.id != id); | ||||
| 
 | ||||
| 					alert({ | ||||
| 						type: 'error', | ||||
| 						text: 'upload failed' | ||||
| 					}); | ||||
| 
 | ||||
| 					reject(); | ||||
| 					return; | ||||
| 				} | ||||
| 
 | ||||
| 				const driveFile = JSON.parse(ev.target.response); | ||||
| 
 | ||||
| 				resolve(driveFile); | ||||
| 
 | ||||
| 				uploads.value = uploads.value.filter(x => x.id != id); | ||||
| 			}; | ||||
| 
 | ||||
| 			xhr.upload.onprogress = e => { | ||||
| 				if (e.lengthComputable) { | ||||
| 					ctx.progressMax = e.total; | ||||
| 					ctx.progressValue = e.loaded; | ||||
| 				} | ||||
| 			}; | ||||
| 
 | ||||
| 			xhr.send(data); | ||||
| 		}; | ||||
| 		reader.readAsArrayBuffer(file); | ||||
| 	}); | ||||
| } | ||||
| 
 | ||||
| /* | ||||
| export function checkExistence(fileData: ArrayBuffer): Promise<any> { | ||||
| 	return new Promise((resolve, reject) => { | ||||
|  |  | |||
|  | @ -31,6 +31,7 @@ import * as os from '@/os'; | |||
| import { stream } from '@/stream'; | ||||
| import { Autocomplete } from '@/scripts/autocomplete'; | ||||
| import { throttle } from 'throttle-debounce'; | ||||
| import { uploadFile } from '@/scripts/upload'; | ||||
| 
 | ||||
| export default defineComponent({ | ||||
| 	props: { | ||||
|  | @ -164,7 +165,7 @@ export default defineComponent({ | |||
| 		}, | ||||
| 
 | ||||
| 		upload(file: File, name?: string) { | ||||
| 			os.upload(file, this.$store.state.uploadFolder, name).then(res => { | ||||
| 			uploadFile(file, this.$store.state.uploadFolder, name).then(res => { | ||||
| 				this.file = res; | ||||
| 			}); | ||||
| 		}, | ||||
|  |  | |||
|  | @ -4,6 +4,7 @@ import { stream } from '@/stream'; | |||
| import { i18n } from '@/i18n'; | ||||
| import { defaultStore } from '@/store'; | ||||
| import { DriveFile } from 'misskey-js/built/entities'; | ||||
| import { uploadFile } from '@/scripts/upload'; | ||||
| 
 | ||||
| function select(src: any, label: string | null, multiple: boolean): Promise<DriveFile | DriveFile[]> { | ||||
| 	return new Promise((res, rej) => { | ||||
|  | @ -14,7 +15,7 @@ function select(src: any, label: string | null, multiple: boolean): Promise<Driv | |||
| 			input.type = 'file'; | ||||
| 			input.multiple = multiple; | ||||
| 			input.onchange = () => { | ||||
| 				const promises = Array.from(input.files).map(file => os.upload(file, defaultStore.state.uploadFolder, undefined, keepOriginal.value)); | ||||
| 				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]); | ||||
|  |  | |||
							
								
								
									
										115
									
								
								packages/client/src/scripts/upload.ts
									
										
									
									
									
										Normal file
									
								
							
							
						
						
									
										115
									
								
								packages/client/src/scripts/upload.ts
									
										
									
									
									
										Normal file
									
								
							|  | @ -0,0 +1,115 @@ | |||
| import { reactive, ref } from 'vue'; | ||||
| import { defaultStore } from '@/store'; | ||||
| import { apiUrl } from '@/config'; | ||||
| import * as Misskey from 'misskey-js'; | ||||
| import { $i } from '@/account'; | ||||
| 
 | ||||
| type Uploading = { | ||||
| 	id: string; | ||||
| 	name: string; | ||||
| 	progressMax: number | undefined; | ||||
| 	progressValue: number | undefined; | ||||
| 	img: string; | ||||
| }; | ||||
| export const uploads = ref<Uploading[]>([]); | ||||
| 
 | ||||
| const compressTypeMap = { | ||||
| 	'image/jpeg': { quality: 0.85 }, | ||||
| 	'image/webp': { quality: 0.85, mimeType: 'image/jpeg'}, | ||||
| 	'image/svg+xml': { quality: 1, mimeType: 'image/png'}, | ||||
| } as const; | ||||
| 
 | ||||
| const mimeTypeMap = { | ||||
| 	'image/webp': 'webp', | ||||
| 	'image/jpeg': 'jpg', | ||||
| 	'image/png': 'png', | ||||
| } as const; | ||||
| 
 | ||||
| export function uploadFile( | ||||
| 	file: File, | ||||
| 	folder?: any, | ||||
| 	name?: string, | ||||
| 	keepOriginal: boolean = defaultStore.state.keepOriginalUploading | ||||
| ): Promise<Misskey.entities.DriveFile> { | ||||
| 	if (folder && typeof folder == 'object') folder = folder.id; | ||||
| 
 | ||||
| 	return new Promise((resolve, reject) => { | ||||
| 		const id = Math.random().toString(); | ||||
| 
 | ||||
| 		const reader = new FileReader(); | ||||
| 		reader.onload = async (e) => { | ||||
| 			const ctx = reactive<Uploading>({ | ||||
| 				id: id, | ||||
| 				name: name || file.name || 'untitled', | ||||
| 				progressMax: undefined, | ||||
| 				progressValue: undefined, | ||||
| 				img: window.URL.createObjectURL(file) | ||||
| 			}); | ||||
| 
 | ||||
| 			uploads.value.push(ctx); | ||||
| 
 | ||||
| 			let resizedImage: any; | ||||
| 			if (!keepOriginal && file.type in compressTypeMap) { | ||||
| 				const imgConfig = compressTypeMap[file.type]; | ||||
| 				const changeType = 'mimeType' in imgConfig; | ||||
| 
 | ||||
| 				const config = { | ||||
| 					maxWidth: 2048, | ||||
| 					maxHeight: 2048, | ||||
| 					autoRotate: true, | ||||
| 					debug: true, | ||||
| 					...imgConfig, | ||||
| 					...(changeType ? {} : { mimeType: file.type }), | ||||
| 				}; | ||||
| 
 | ||||
| 				try { | ||||
| 					const { readAndCompressImage } = await import('browser-image-resizer'); | ||||
| 					resizedImage = await readAndCompressImage(file, config); | ||||
| 					ctx.name = changeType ? `${ctx.name}.${mimeTypeMap[compressTypeMap[file.type].mimeType]}` : ctx.name; | ||||
| 				} catch (e) { | ||||
| 					console.error('Failed to resize image', e); | ||||
| 				} | ||||
| 			} | ||||
| 
 | ||||
| 			const data = new FormData(); | ||||
| 			data.append('i', $i.token); | ||||
| 			data.append('force', 'true'); | ||||
| 			data.append('file', resizedImage || file); | ||||
| 			data.append('name', ctx.name); | ||||
| 			if (folder) data.append('folderId', folder); | ||||
| 
 | ||||
| 			const xhr = new XMLHttpRequest(); | ||||
| 			xhr.open('POST', apiUrl + '/drive/files/create', true); | ||||
| 			xhr.onload = (ev) => { | ||||
| 				if (xhr.status !== 200 || ev.target == null || ev.target.response == null) { | ||||
| 					// TODO: 消すのではなくて再送できるようにしたい
 | ||||
| 					uploads.value = uploads.value.filter(x => x.id != id); | ||||
| 
 | ||||
| 					alert({ | ||||
| 						type: 'error', | ||||
| 						text: 'upload failed' | ||||
| 					}); | ||||
| 
 | ||||
| 					reject(); | ||||
| 					return; | ||||
| 				} | ||||
| 
 | ||||
| 				const driveFile = JSON.parse(ev.target.response); | ||||
| 
 | ||||
| 				resolve(driveFile); | ||||
| 
 | ||||
| 				uploads.value = uploads.value.filter(x => x.id != id); | ||||
| 			}; | ||||
| 
 | ||||
| 			xhr.upload.onprogress = e => { | ||||
| 				if (e.lengthComputable) { | ||||
| 					ctx.progressMax = e.total; | ||||
| 					ctx.progressValue = e.loaded; | ||||
| 				} | ||||
| 			}; | ||||
| 
 | ||||
| 			xhr.send(data); | ||||
| 		}; | ||||
| 		reader.readAsArrayBuffer(file); | ||||
| 	}); | ||||
| } | ||||
|  | @ -15,7 +15,8 @@ | |||
| 
 | ||||
| <script lang="ts"> | ||||
| import { defineAsyncComponent, defineComponent } from 'vue'; | ||||
| import { popup, popups, uploads, pendingApiRequestsCount } from '@/os'; | ||||
| import { popup, popups, pendingApiRequestsCount } from '@/os'; | ||||
| import { uploads } from '@/scripts/upload'; | ||||
| import * as sound from '@/scripts/sound'; | ||||
| import { $i } from '@/account'; | ||||
| import { stream } from '@/stream'; | ||||
|  |  | |||
|  | @ -20,8 +20,8 @@ | |||
| <script lang="ts" setup> | ||||
| import { } from 'vue'; | ||||
| import * as os from '@/os'; | ||||
| import { uploads } from '@/scripts/upload'; | ||||
| 
 | ||||
| const uploads = os.uploads; | ||||
| const zIndex = os.claimZIndex('high'); | ||||
| </script> | ||||
| 
 | ||||
|  |  | |||
|  | @ -1423,6 +1423,13 @@ broadcast-channel@4.9.0: | |||
|     rimraf "3.0.2" | ||||
|     unload "2.3.1" | ||||
| 
 | ||||
| browser-image-resizer@2.2.1: | ||||
|   version "2.2.1" | ||||
|   resolved "https://registry.yarnpkg.com/browser-image-resizer/-/browser-image-resizer-2.2.1.tgz#61ba6d71edbdcc2caf2017c5687f5a8cf6301689" | ||||
|   integrity sha512-NwtjlgzKzX9zjI8bh77bnVeOrn6ZuOhD1u7NFjNClQbjCEwI4VH0GYqCh5Bcb0WIWZCDEVJFH9PH49Blk53nlw== | ||||
|   dependencies: | ||||
|     exifreader "^3.1.0" | ||||
| 
 | ||||
| browser-stdout@1.3.1: | ||||
|   version "1.3.1" | ||||
|   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60" | ||||
|  | @ -2743,6 +2750,13 @@ executable@^4.1.1: | |||
|   dependencies: | ||||
|     pify "^2.2.0" | ||||
| 
 | ||||
| exifreader@^3.1.0: | ||||
|   version "3.16.0" | ||||
|   resolved "https://registry.yarnpkg.com/exifreader/-/exifreader-3.16.0.tgz#3c106eccd134e8f4786f9e8e600f8269c5296b80" | ||||
|   integrity sha512-RfdE1LrU3KJm8NFnU3jJG4/1quEancwTz1VgwzItP11fBoVnb3Vp7JL8bQKU8rSgZm+Roa3+BJ7zg4OtoFhTFA== | ||||
|   optionalDependencies: | ||||
|     xmldom "^0.1.31" | ||||
| 
 | ||||
| exit-on-epipe@~1.0.1: | ||||
|   version "1.0.1" | ||||
|   resolved "https://registry.yarnpkg.com/exit-on-epipe/-/exit-on-epipe-1.0.1.tgz#0bdd92e87d5285d267daa8171d0eb06159689692" | ||||
|  | @ -6412,6 +6426,11 @@ xml-js@^1.6.11: | |||
|   dependencies: | ||||
|     sax "^1.2.4" | ||||
| 
 | ||||
| xmldom@^0.1.31: | ||||
|   version "0.1.31" | ||||
|   resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.31.tgz#b76c9a1bd9f0a9737e5a72dc37231cf38375e2ff" | ||||
|   integrity sha512-yS2uJflVQs6n+CyjHoaBmVSqIDevTAWrzMmjG1Gc7h1qQ7uVozNhEPJAwZXWyGQ/Gafo3fCwrcaokezLPupVyQ== | ||||
| 
 | ||||
| y18n@^4.0.0: | ||||
|   version "4.0.1" | ||||
|   resolved "https://registry.yarnpkg.com/y18n/-/y18n-4.0.1.tgz#8db2b83c31c5d75099bb890b23f3094891e247d4" | ||||
|  |  | |||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue