Capital/pages/gallery/new.vue

228 lines
6.9 KiB
Vue
Raw Permalink Normal View History

<template>
<div class="h-[calc(100vh-80px)] flex flex-col justify-center items-center">
<h1 class="text-2xl font-bold">{{ t("attachmentCreate") }}</h1>
<p>{{ t("attachmentCreateCaption") }}</p>
<div class="my-5 w-[640px]">
<v-expand-transition>
2024-08-21 17:26:32 +00:00
<div v-if="!multipartProgress.value">
2024-09-18 15:04:42 +00:00
<v-file-input label="File input" variant="solo" :hide-details="true" v-model="content"></v-file-input>
2024-08-21 17:26:32 +00:00
<v-select
label="Storage pool"
2024-09-26 13:22:34 +00:00
variant="solo"
2024-08-21 17:26:32 +00:00
:items="poolOptions"
item-title="label"
item-value="value"
density="comfortable"
prepend-icon="mdi-database"
:hide-details="true"
class="mt-5"
v-model="pool"
>
<template v-slot:item="{ props, item }">
<v-list-item v-bind="props" :subtitle="item.raw.description" :disabled="item.raw.disabled" />
</template>
</v-select>
</div>
</v-expand-transition>
<v-expand-transition>
<div v-if="multipartProgress.value" class="text-center flex flex-col">
<span class="text-sm">
{{ success ? t("attachmentUploadCompleted") : t("attachmentUploadProgress") }}
{{ multipartProgress.current }}/{{ multipartProgress.total }}
{{ (multipartProgress.value * 100).toFixed(2) }}%
</span>
<p class="text-xs text-grey">{{ formatBytes(multipartSize) }} per chunk · #{{ multipartInfo?.rid }}</p>
<v-progress-linear class="mt-2" :model-value="multipartProgress.value" :max="1" height="4" rounded />
</div>
</v-expand-transition>
<v-expand-transition>
<div v-if="success">
2024-08-21 17:26:32 +00:00
<v-card class="mt-3">
<attachment-carousel :attachments="[multipartInfo.rid]" />
2024-08-21 17:26:32 +00:00
</v-card>
</div>
</v-expand-transition>
<v-expand-transition>
<v-alert v-if="error" variant="tonal" type="error" class="text-xs mt-3">
{{ t("errorOccurred", [error]) }}
</v-alert>
</v-expand-transition>
</div>
<div class="flex">
<v-btn :text="t('upload')" prepend-icon="mdi-upload" variant="plain" :loading="loading" @click="submit" />
2024-09-18 15:04:42 +00:00
<v-btn
:text="t('cancel')"
color="grey"
append-icon="mdi-exit-to-app"
variant="plain"
to="/gallery"
:disabled="loading"
/>
</div>
<copyright class="mt-4" service="paperclip" />
</div>
</template>
<script setup lang="ts">
definePageMeta({
middleware: ["auth"],
})
useHead({
title: "Create Attachment",
})
const { t } = useI18n()
2024-09-26 13:22:34 +00:00
const route = useRoute()
onMounted(() => {
if (route.query.pool) {
pool.value = atob(decodeURIComponent(route.query.pool.toString()))
if (pool.value == "dedicated") {
pool.value = poolOptions[0].value
}
}
})
2024-08-21 17:26:32 +00:00
const poolOptions = [
{ label: "Interactive", description: "Public indexable, no lifecycle.", value: "interactive" },
{ label: "Messaging", description: "Has lifecycle, will delete after 14 days.", value: "messaging" },
2024-09-26 13:22:34 +00:00
{ label: "Sticker", description: "Public indexable, privilege required.", value: "sticker", disabled: true },
2024-08-21 17:26:32 +00:00
{ label: "Dedicated Pool", description: "Your own configuration, coming soon.", value: "dedicated", disabled: true },
]
const content = ref<File | null>(null)
2024-08-21 17:26:32 +00:00
const pool = ref("interactive")
const error = ref<string | null>(null)
const success = ref(false)
const multipartSize = ref(0)
const multipartInfo = ref<any>(null)
2024-09-18 15:04:42 +00:00
const multipartProgress = reactive<{ value: number | null; current: number; total: number }>({
value: null,
current: 0,
total: 0,
})
const loading = ref(false)
async function submit() {
if (!content.value) return
loading.value = true
2024-08-21 17:26:32 +00:00
const limit = 3
try {
await createMultipartPlaceholder()
console.log(`[PAPERCLIP] Multipart placeholder has been created with rid ${multipartInfo.value.rid}`)
2024-08-21 17:26:32 +00:00
multipartProgress.value = 0
2024-08-21 17:26:32 +00:00
multipartProgress.current = 0
const chunks = Object.keys(multipartInfo.value["file_chunks"] ?? {})
multipartProgress.total = chunks.length
const uploadChunks = async (chunk: string) => {
2024-09-18 15:39:37 +00:00
try {
await uploadSingleMultipart(chunk)
multipartProgress.current++
console.log(`[PAPERCLIP] Uploaded multipart ${multipartProgress.current}/${multipartProgress.total}`)
multipartProgress.value = multipartProgress.current / multipartProgress.total
} catch (err) {
console.log(`[PAPERCLIP] Upload multipart ${chunk} failed, retrying in 3 seconds...`)
await new Promise((r) => setTimeout(r, 3000))
await uploadChunks(chunk)
}
2024-08-21 17:26:32 +00:00
}
2024-09-18 15:56:00 +00:00
for (let i = 0; i < chunks.length; i += limit) {
const chunkSlice = chunks.slice(i, i + limit)
await Promise.all(chunkSlice.map(uploadChunks))
}
2024-08-21 17:26:32 +00:00
if (multipartInfo.value["is_uploaded"]) {
console.log(`[PAPERCLIP] Entire file has been uploaded in ${multipartProgress.total} chunk(s)`)
success.value = true
}
} catch (e) {
console.error(e)
error.value = e as string
}
loading.value = false
}
async function createMultipartPlaceholder() {
if (!content.value) return
2024-08-21 17:26:32 +00:00
const mimetypeMap: { [id: string]: string } = {
2024-09-18 15:04:42 +00:00
mp4: "video/mp4",
mov: "video/quicktime",
mp3: "audio/mp3",
wav: "audio/wav",
m4a: "audio/m4a",
2024-08-21 17:26:32 +00:00
}
const mimetype = mimetypeMap[content.value.name.split(".").pop() as string]
const nameArray = content.value.name.split(".")
nameArray.pop()
const resp = await solarFetch("/cgi/uc/attachments/multipart", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
2024-08-21 17:26:32 +00:00
pool: pool.value,
size: content.value.size,
name: content.value.name,
alt: nameArray.join("."),
2024-08-21 17:26:32 +00:00
mimetype: mimetype,
}),
})
if (resp.status != 200) throw new Error(await resp.text())
const data = await resp.json()
multipartSize.value = data["chunk_size"]
multipartInfo.value = data["meta"]
}
async function uploadSingleMultipart(chunkId: string) {
if (!content.value) return
if (!multipartInfo.value) return
const chunkIdx: number = multipartInfo.value["file_chunks"][chunkId]
const chunk = content.value.slice(chunkIdx * multipartSize.value, (chunkIdx + 1) * multipartSize.value)
const data = new FormData()
data.set("file", chunk)
const resp = await solarFetch(`/cgi/uc/attachments/multipart/${multipartInfo.value.rid}/${chunkId}`, {
method: "POST",
body: data,
2024-09-18 15:04:42 +00:00
signal: AbortSignal.timeout(3 * 60 * 1000),
})
if (resp.status != 200) throw new Error(await resp.text())
multipartInfo.value = await resp.json()
}
function formatBytes(bytes: number, decimals = 2) {
if (!+bytes) return "0 Bytes"
const k = 1024
const dm = decimals < 0 ? 0 : decimals
const sizes = ["Bytes", "KiB", "MiB", "GiB", "TiB", "PiB", "EiB", "ZiB", "YiB"]
const i = Math.floor(Math.log(bytes) / Math.log(k))
return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))} ${sizes[i]}`
}
</script>