improved file uploads

frontend/components/actions/UploadDialog.vue

@@ -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
                 >

frontend/components/actions/UploadListEntry.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import byteSize from 'byte-size';
+import type { UploadFile } from '~/types';
+
+const emit = defineEmits(['removeFile']);
+
+const { file, uploading } = defineProps<{
+    file: UploadFile;
+    uploading: boolean;
+}>();
+</script>
+
+<template>
+    <div
+        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.status === 'not_uploaded'"
+                class="h-5 w-5"
+                :name="getFileIcon(file.data.type)"
+            />
+            <Icon
+                v-else-if="file.status === 'uploading'"
+                class="h-5 w-5"
+                name="lucide:upload"
+            />
+            <Icon
+                v-else-if="file.status === 'completed'"
+                class="h-5 w-5 text-green-300"
+                name="lucide:circle-check"
+            />
+            <Icon
+                v-else-if="file.status === 'failed'"
+                class="h-5 w-5 text-destructive-foreground"
+                name="lucide:circle-alert"
+            />
+        </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="emit('removeFile')"
+            >
+                <Icon name="lucide:x" />
+            </Button>
+        </div>
+    </div>
+</template>

frontend/components/ui/progress/Progress.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  ProgressIndicator,
+  ProgressRoot,
+  type ProgressRootProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(
+  defineProps<ProgressRootProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    modelValue: 0,
+  },
+)
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ProgressRoot
+    data-slot="progress"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-primary/20 relative h-2 w-full overflow-hidden rounded-full',
+        props.class,
+      )
+    "
+  >
+    <ProgressIndicator
+      data-slot="progress-indicator"
+      class="bg-primary h-full w-full flex-1 transition-all"
+      :style="`transform: translateX(-${100 - (props.modelValue ?? 0)}%);`"
+    />
+  </ProgressRoot>
+</template>

frontend/components/ui/progress/index.ts

@@ -0,0 +1 @@
+export { default as Progress } from './Progress.vue'