2023-01-13 04:40:33 +00:00
|
|
|
import { reactive, ref } from "vue";
|
|
|
|
import * as Misskey from "calckey-js";
|
|
|
|
import { readAndCompressImage } from "browser-image-resizer";
|
|
|
|
import { defaultStore } from "@/store";
|
|
|
|
import { apiUrl } from "@/config";
|
|
|
|
import { $i } from "@/account";
|
|
|
|
import { alert } from "@/os";
|
|
|
|
import { i18n } from "@/i18n";
|
2022-04-28 02:14:03 +00:00
|
|
|
|
|
|
|
type Uploading = {
|
|
|
|
id: string;
|
|
|
|
name: string;
|
|
|
|
progressMax: number | undefined;
|
|
|
|
progressValue: number | undefined;
|
|
|
|
img: string;
|
|
|
|
};
|
|
|
|
export const uploads = ref<Uploading[]>([]);
|
|
|
|
|
|
|
|
const compressTypeMap = {
|
2023-01-13 04:40:33 +00:00
|
|
|
"image/jpeg": { quality: 0.85, mimeType: "image/jpeg" },
|
|
|
|
"image/webp": { quality: 0.85, mimeType: "image/png" },
|
|
|
|
"image/svg+xml": { quality: 1, mimeType: "image/png" },
|
2022-04-28 02:14:03 +00:00
|
|
|
} as const;
|
|
|
|
|
|
|
|
const mimeTypeMap = {
|
2023-01-13 04:40:33 +00:00
|
|
|
"image/webp": "webp",
|
|
|
|
"image/jpeg": "jpg",
|
|
|
|
"image/png": "png",
|
|
|
|
"image/avif": "avif",
|
2022-04-28 02:14:03 +00:00
|
|
|
} as const;
|
|
|
|
|
|
|
|
export function uploadFile(
|
|
|
|
file: File,
|
|
|
|
folder?: any,
|
|
|
|
name?: string,
|
2022-07-02 06:12:11 +00:00
|
|
|
keepOriginal: boolean = defaultStore.state.keepOriginalUploading,
|
2022-04-28 02:14:03 +00:00
|
|
|
): Promise<Misskey.entities.DriveFile> {
|
2023-01-13 04:40:33 +00:00
|
|
|
if (folder && typeof folder === "object") folder = folder.id;
|
2022-04-28 02:14:03 +00:00
|
|
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
const id = Math.random().toString();
|
|
|
|
|
|
|
|
const reader = new FileReader();
|
2022-05-07 05:19:15 +00:00
|
|
|
reader.onload = async (ev) => {
|
2022-04-28 02:14:03 +00:00
|
|
|
const ctx = reactive<Uploading>({
|
|
|
|
id: id,
|
2023-01-13 04:40:33 +00:00
|
|
|
name: name || file.name || "untitled",
|
2022-04-28 02:14:03 +00:00
|
|
|
progressMax: undefined,
|
|
|
|
progressValue: undefined,
|
2022-07-02 06:12:11 +00:00
|
|
|
img: window.URL.createObjectURL(file),
|
2022-04-28 02:14:03 +00:00
|
|
|
});
|
|
|
|
|
|
|
|
uploads.value.push(ctx);
|
|
|
|
|
|
|
|
let resizedImage: any;
|
|
|
|
if (!keepOriginal && file.type in compressTypeMap) {
|
|
|
|
const imgConfig = compressTypeMap[file.type];
|
|
|
|
|
|
|
|
const config = {
|
|
|
|
maxWidth: 2048,
|
|
|
|
maxHeight: 2048,
|
|
|
|
debug: true,
|
|
|
|
...imgConfig,
|
|
|
|
};
|
|
|
|
|
|
|
|
try {
|
|
|
|
resizedImage = await readAndCompressImage(file, config);
|
2023-01-13 04:40:33 +00:00
|
|
|
ctx.name =
|
|
|
|
file.type !== imgConfig.mimeType
|
|
|
|
? `${ctx.name}.${
|
|
|
|
mimeTypeMap[compressTypeMap[file.type].mimeType]
|
|
|
|
}`
|
|
|
|
: ctx.name;
|
2022-05-07 05:19:15 +00:00
|
|
|
} catch (err) {
|
2023-01-13 04:40:33 +00:00
|
|
|
console.error("Failed to resize image", err);
|
2022-04-28 02:14:03 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-05-07 05:19:15 +00:00
|
|
|
const formData = new FormData();
|
2023-01-13 04:40:33 +00:00
|
|
|
formData.append("force", "true");
|
|
|
|
formData.append("file", resizedImage || file);
|
|
|
|
formData.append("name", ctx.name);
|
|
|
|
if (folder) formData.append("folderId", folder);
|
2022-04-28 02:14:03 +00:00
|
|
|
|
|
|
|
const xhr = new XMLHttpRequest();
|
2023-01-13 04:40:33 +00:00
|
|
|
xhr.open("POST", `${apiUrl}/drive/files/create`, true);
|
|
|
|
xhr.setRequestHeader("Authorization", `Bearer ${$i.token}`);
|
2022-04-28 02:14:03 +00:00
|
|
|
xhr.onload = (ev) => {
|
2023-01-13 04:40:33 +00:00
|
|
|
if (
|
|
|
|
xhr.status !== 200 ||
|
|
|
|
ev.target == null ||
|
|
|
|
ev.target.response == null
|
|
|
|
) {
|
2022-07-07 12:06:37 +00:00
|
|
|
// TODO: 消すのではなくて(ネットワーク的なエラーなら)再送できるようにしたい
|
2023-01-13 04:40:33 +00:00
|
|
|
uploads.value = uploads.value.filter((x) => x.id !== id);
|
2022-04-28 02:14:03 +00:00
|
|
|
|
2023-04-22 08:18:57 +00:00
|
|
|
if (xhr.status === 413) {
|
|
|
|
alert({
|
2023-04-23 00:22:53 +00:00
|
|
|
type: "error",
|
2023-04-22 08:18:57 +00:00
|
|
|
title: i18n.ts.failedToUpload,
|
|
|
|
text: i18n.ts.cannotUploadBecauseExceedsFileSizeLimit,
|
|
|
|
});
|
|
|
|
} else if (ev.target?.response) {
|
2022-07-07 12:06:37 +00:00
|
|
|
const res = JSON.parse(ev.target.response);
|
2023-01-13 04:40:33 +00:00
|
|
|
if (res.error?.id === "bec5bd69-fba3-43c9-b4fb-2894b66ad5d2") {
|
2022-07-07 12:06:37 +00:00
|
|
|
alert({
|
2023-01-13 04:40:33 +00:00
|
|
|
type: "error",
|
2022-07-07 12:06:37 +00:00
|
|
|
title: i18n.ts.failedToUpload,
|
|
|
|
text: i18n.ts.cannotUploadBecauseInappropriate,
|
|
|
|
});
|
2023-01-13 04:40:33 +00:00
|
|
|
} else if (
|
|
|
|
res.error?.id === "d08dbc37-a6a9-463a-8c47-96c32ab5f064"
|
|
|
|
) {
|
2022-07-07 12:06:37 +00:00
|
|
|
alert({
|
2023-01-13 04:40:33 +00:00
|
|
|
type: "error",
|
2022-07-07 12:06:37 +00:00
|
|
|
title: i18n.ts.failedToUpload,
|
|
|
|
text: i18n.ts.cannotUploadBecauseNoFreeSpace,
|
|
|
|
});
|
|
|
|
} else {
|
|
|
|
alert({
|
2023-01-13 04:40:33 +00:00
|
|
|
type: "error",
|
2022-07-07 12:06:37 +00:00
|
|
|
title: i18n.ts.failedToUpload,
|
|
|
|
text: `${res.error?.message}\n${res.error?.code}\n${res.error?.id}`,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
alert({
|
2023-01-13 04:40:33 +00:00
|
|
|
type: "error",
|
|
|
|
title: "Failed to upload",
|
|
|
|
text: `${JSON.stringify(ev.target?.response)}, ${JSON.stringify(
|
|
|
|
xhr.response,
|
|
|
|
)}`,
|
2022-07-07 12:06:37 +00:00
|
|
|
});
|
|
|
|
}
|
2022-04-28 02:14:03 +00:00
|
|
|
|
|
|
|
reject();
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const driveFile = JSON.parse(ev.target.response);
|
|
|
|
|
|
|
|
resolve(driveFile);
|
|
|
|
|
2023-01-13 04:40:33 +00:00
|
|
|
uploads.value = uploads.value.filter((x) => x.id !== id);
|
2022-04-28 02:14:03 +00:00
|
|
|
};
|
|
|
|
|
2023-01-13 04:40:33 +00:00
|
|
|
xhr.upload.onprogress = (ev) => {
|
2022-05-07 05:19:15 +00:00
|
|
|
if (ev.lengthComputable) {
|
|
|
|
ctx.progressMax = ev.total;
|
|
|
|
ctx.progressValue = ev.loaded;
|
2022-04-28 02:14:03 +00:00
|
|
|
}
|
|
|
|
};
|
|
|
|
|
2022-05-07 05:19:15 +00:00
|
|
|
xhr.send(formData);
|
2022-04-28 02:14:03 +00:00
|
|
|
};
|
|
|
|
reader.readAsArrayBuffer(file);
|
|
|
|
});
|
|
|
|
}
|