Initial commit

frontend/src/components/UploadDialog/UploadEntry.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { defineProps, defineExpose, ref } from 'vue';
+import { isErrorResponse, upload_file } from '@/api';
+import { NProgress } from 'naive-ui';
+import filesize from 'filesize';
+
+const props = defineProps<{
+	file: File;
+}>();
+
+const progress = ref(0);
+const percentage = ref(0);
+const err = ref('');
+const status = ref('info');
+
+async function startUpload(parent: number, token: string) {
+	const resp = await upload_file(token, parent, props.file, (e) => {
+		progress.value = e.loaded;
+		percentage.value = (e.loaded / e.total) * 100;
+	});
+	percentage.value = 100;
+	if (isErrorResponse(resp)) {
+		err.value = resp.message ?? 'Error';
+		status.value = 'error';
+	} else status.value = 'success';
+}
+
+defineExpose({
+	startUpload
+});
+</script>
+
+<template>
+	<div v-if="percentage < 100">
+		{{ file.name }} - {{ filesize(progress) }} / {{ filesize(file.size) }} -
+		{{ Math.floor(percentage * 1000) / 1000 }}%
+	</div>
+	<div v-else-if="err !== ''">{{ file.name }} - Error: {{ err }}</div>
+	<div v-else>{{ file.name }} - Completed</div>
+	<n-progress
+		type="line"
+		:percentage="percentage"
+		:height="20"
+		:status="status"
+		border-radius="10px 0"
+		fill-border-radius="10px 0"
+		:show-indicator="false"
+	/>
+</template>
+
+<style scoped></style>

frontend/src/components/UploadDialog/UploadFileDialog.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { defineProps, defineExpose, ref, inject } from 'vue';
+import { check_token, TokenInjectType } from '@/api';
+import UploadEntry from '@/components/UploadDialog/UploadEntry.vue';
+import { NCard } from 'naive-ui';
+
+const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+
+const entries = ref<typeof UploadEntry[]>([]);
+const done = ref(false);
+let canCloseResolve = null;
+const canClose = new Promise((r) => (canCloseResolve = r));
+
+async function startUpload(parent: number) {
+	const token = await check_token(jwt);
+	if (!token) return;
+	await Promise.all(
+		entries.value.map((entry) => entry.startUpload(parent, token))
+	);
+	done.value = true;
+	await canClose;
+}
+
+defineExpose({
+	startUpload
+});
+defineProps<{
+	files: File[];
+}>();
+</script>
+
+<template>
+	<n-card title="Upload Files">
+		<div>
+			<UploadEntry
+				v-for="f in files"
+				:key="f.name"
+				ref="entries"
+				:file="f"
+			/>
+		</div>
+		<div>
+			<button v-if="done" @click="canCloseResolve()">Close</button>
+		</div>
+	</n-card>
+</template>
+
+<style scoped></style>