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…
Reference in a new issue