improved file uploads
This commit is contained in:
@@ -10,8 +10,14 @@ import {
|
||||
} from '@/components/ui/dialog';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Progress } from '@/components/ui/progress';
|
||||
import byteSize from 'byte-size';
|
||||
import { uploadToWarren } from '~/lib/api/warrens';
|
||||
import { toast } from 'vue-sonner';
|
||||
import UploadListEntry from './UploadListEntry.vue';
|
||||
|
||||
const uploadStore = useUploadStore();
|
||||
|
||||
const warrenRoute = useWarrenRoute();
|
||||
|
||||
const fileInputElement = ref<HTMLInputElement>(
|
||||
@@ -19,11 +25,16 @@ const fileInputElement = ref<HTMLInputElement>(
|
||||
);
|
||||
|
||||
const uploading = ref(false);
|
||||
const open = ref(false);
|
||||
const files = ref<Array<{ uploaded: boolean; data: File }>>([]);
|
||||
const presentPaths = new Set<string>();
|
||||
|
||||
function onFilesChanged(event: Event) {
|
||||
if (warrenRoute.value == null) {
|
||||
toast.warning('Upload', {
|
||||
description: 'Enter a warren before attempting to upload files',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.target == null) {
|
||||
return;
|
||||
}
|
||||
@@ -34,64 +45,144 @@ function onFilesChanged(event: Event) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (uploadStore.path == null) {
|
||||
uploadStore.path = warrenRoute.value;
|
||||
} else if (uploadStore.path !== warrenRoute.value) {
|
||||
toast.warning('Upload', {
|
||||
description:
|
||||
'The unfinished items belong to a different directory. Remove them before attempting to upload to a different directory.',
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
for (const file of target.files) {
|
||||
if (presentPaths.has(file.name)) {
|
||||
continue;
|
||||
}
|
||||
files.value.push({ uploaded: false, data: file });
|
||||
uploadStore.files.push({
|
||||
status: 'not_uploaded',
|
||||
data: file,
|
||||
});
|
||||
presentPaths.add(file.name);
|
||||
}
|
||||
|
||||
fileInputElement.value.value = '';
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (files.value.length < 1) {
|
||||
return;
|
||||
}
|
||||
|
||||
uploading.value = true;
|
||||
|
||||
const dt = new DataTransfer();
|
||||
for (const file of files.value) {
|
||||
if (!file.uploaded) {
|
||||
dt.items.add(file.data);
|
||||
}
|
||||
}
|
||||
|
||||
const { success } = await uploadToWarren(warrenRoute.value, dt.files);
|
||||
|
||||
uploading.value = false;
|
||||
if (success) {
|
||||
for (const file of files.value) {
|
||||
file.uploaded = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function removeFile(index: number) {
|
||||
if (files.value.length <= index) {
|
||||
if (uploadStore.files.length <= index) {
|
||||
return;
|
||||
}
|
||||
|
||||
const [file] = files.value.splice(index, 1);
|
||||
const [file] = uploadStore.files.splice(index, 1);
|
||||
presentPaths.delete(file.data.name);
|
||||
|
||||
if (uploadStore.files.length < 1) {
|
||||
uploadStore.path = null;
|
||||
uploadStore.progress = null;
|
||||
}
|
||||
}
|
||||
|
||||
function clearCompletedFiles() {
|
||||
files.value = files.value.filter((f) => {
|
||||
if (f.uploaded) {
|
||||
uploadStore.files = uploadStore.files.filter((f) => {
|
||||
if (f.status === 'completed') {
|
||||
presentPaths.delete(f.data.name);
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
});
|
||||
|
||||
if (uploadStore.files.length < 1) {
|
||||
uploadStore.path = null;
|
||||
uploadStore.progress = null;
|
||||
}
|
||||
}
|
||||
|
||||
function updateFileListStatus(loadedBytes: number, ended: boolean = false) {
|
||||
let acc = 0;
|
||||
|
||||
for (let i = uploadStore.startIndex; i < uploadStore.files.length; i++) {
|
||||
if (uploadStore.progress == null) {
|
||||
uploadStore.files[i].status = 'not_uploaded';
|
||||
continue;
|
||||
}
|
||||
|
||||
acc += uploadStore.files[i].data.size;
|
||||
|
||||
if (acc > loadedBytes) {
|
||||
if (ended) {
|
||||
for (let j = i; j < uploadStore.files.length; j++) {
|
||||
uploadStore.files[j].status = 'failed';
|
||||
}
|
||||
} else {
|
||||
uploadStore.files[i].status = 'uploading';
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
uploadStore.files[i].status = 'completed';
|
||||
}
|
||||
}
|
||||
|
||||
async function submit() {
|
||||
if (uploadStore.path == null) {
|
||||
return;
|
||||
}
|
||||
|
||||
const dt = new DataTransfer();
|
||||
|
||||
uploadStore.startIndex = uploadStore.files.findIndex(
|
||||
(f) => f.status !== 'completed'
|
||||
);
|
||||
let calculatedTotal = 0;
|
||||
|
||||
for (let i = uploadStore.startIndex; i < uploadStore.files.length; i++) {
|
||||
const file = uploadStore.files[i];
|
||||
|
||||
if (file.status !== 'completed') {
|
||||
dt.items.add(file.data);
|
||||
calculatedTotal += file.data.size;
|
||||
}
|
||||
}
|
||||
|
||||
uploading.value = true;
|
||||
|
||||
uploadStore.progress = {
|
||||
loadedBytes: 0,
|
||||
totalBytes: calculatedTotal,
|
||||
};
|
||||
|
||||
const { success } = await uploadToWarren(
|
||||
uploadStore.path,
|
||||
dt.files,
|
||||
(loaded, total) => {
|
||||
if (uploadStore.progress != null) {
|
||||
uploadStore.progress.loadedBytes = loaded;
|
||||
uploadStore.progress.totalBytes = total;
|
||||
|
||||
updateFileListStatus(loaded, false);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
uploading.value = false;
|
||||
if (success) {
|
||||
if (uploadStore.progress != null) {
|
||||
uploadStore.progress.loadedBytes = uploadStore.progress.totalBytes;
|
||||
}
|
||||
|
||||
for (const file of uploadStore.files) {
|
||||
file.status = 'completed';
|
||||
}
|
||||
} else {
|
||||
updateFileListStatus(uploadStore.progress.loadedBytes, true);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Dialog v-model:open="open">
|
||||
<Dialog>
|
||||
<DialogTrigger as-child>
|
||||
<slot />
|
||||
</DialogTrigger>
|
||||
@@ -99,7 +190,13 @@ function clearCompletedFiles() {
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload files</DialogTitle>
|
||||
<DialogDescription
|
||||
>Upload files to the current directory</DialogDescription
|
||||
>Upload files to
|
||||
<span class="text-foreground">{{
|
||||
uploadStore.path == null ||
|
||||
warrenRoute === uploadStore.path
|
||||
? 'the current directory'
|
||||
: routeWithWarrenName(uploadStore.path)
|
||||
}}</span></DialogDescription
|
||||
>
|
||||
</DialogHeader>
|
||||
|
||||
@@ -114,53 +211,32 @@ function clearCompletedFiles() {
|
||||
<div
|
||||
class="flex min-h-[280px] sm:min-h-[unset] sm:aspect-video w-full items-center justify-center rounded-xl border overflow-hidden"
|
||||
>
|
||||
<ScrollArea v-if="files.length > 0" class="h-full w-full">
|
||||
<ScrollArea
|
||||
v-if="uploadStore.files.length > 0"
|
||||
class="h-full w-full"
|
||||
>
|
||||
<div
|
||||
class="flex h-full w-full flex-col items-stretch gap-1 text-left p-2"
|
||||
>
|
||||
<div
|
||||
v-for="(file, i) in files"
|
||||
<UploadListEntry
|
||||
v-for="(file, i) in uploadStore.files"
|
||||
:key="file.data.name"
|
||||
:file="file"
|
||||
:uploading="uploading"
|
||||
class="flex flex-row items-center justify-between gap-4 rounded-lg border px-4 py-2"
|
||||
>
|
||||
<div class="rounded-sm border p-3">
|
||||
<Icon
|
||||
v-if="!file.uploaded"
|
||||
class="h-5 w-5"
|
||||
:name="getFileIcon(file.data.type)"
|
||||
/>
|
||||
<Icon
|
||||
v-else
|
||||
class="h-5 w-5 text-green-300"
|
||||
name="lucide:circle-check"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex flex-col grow overflow-hidden">
|
||||
<span class="font-medium truncate">{{
|
||||
file.data.name
|
||||
}}</span>
|
||||
<span class="text-muted-foreground">{{
|
||||
byteSize(file.data.size)
|
||||
}}</span>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 items-center">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
:disabled="uploading"
|
||||
@click="() => removeFile(i)"
|
||||
>
|
||||
<Icon name="lucide:x" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
@remove-file="() => removeFile(i)"
|
||||
/>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
<div
|
||||
v-else
|
||||
class="flex h-full w-full items-center justify-center"
|
||||
:disabled="fileInputElement == null"
|
||||
@click="() => files.length < 1 && fileInputElement?.click()"
|
||||
@click="
|
||||
() =>
|
||||
uploadStore.files.length < 1 &&
|
||||
fileInputElement?.click()
|
||||
"
|
||||
>
|
||||
<Icon
|
||||
class="h-[25%] w-[25%] opacity-25"
|
||||
@@ -169,11 +245,31 @@ function clearCompletedFiles() {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="uploadStore.progress != null"
|
||||
class="flex flex-col gap-1"
|
||||
>
|
||||
<Progress
|
||||
:model-value="
|
||||
(uploadStore.progress.loadedBytes /
|
||||
uploadStore.progress.totalBytes) *
|
||||
100.0
|
||||
"
|
||||
class="h-4 [&_*]:!transition-none"
|
||||
/>
|
||||
<span class="text-right">
|
||||
{{ byteSize(uploadStore.progress.loadedBytes) }} /
|
||||
{{ byteSize(uploadStore.progress.totalBytes) }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<Button
|
||||
class="sm:mr-auto"
|
||||
variant="outline"
|
||||
:disabled="files.every((f) => !f.uploaded)"
|
||||
:disabled="
|
||||
uploadStore.files.every((f) => f.status !== 'completed')
|
||||
"
|
||||
@click="clearCompletedFiles"
|
||||
>
|
||||
Clear completed
|
||||
@@ -186,7 +282,10 @@ function clearCompletedFiles() {
|
||||
Select files
|
||||
</Button>
|
||||
<Button
|
||||
:disabled="uploading || !files.some((f) => !f.uploaded)"
|
||||
:disabled="
|
||||
uploading ||
|
||||
!uploadStore.files.some((f) => f.status !== 'completed')
|
||||
"
|
||||
@click="submit"
|
||||
>Upload</Button
|
||||
>
|
||||
|
||||
Reference in New Issue
Block a user