Fixed frontend

frontend/src/components/UploadDialog/UploadEntry.vue

@@ -1,51 +1,52 @@
 <script setup lang="ts">
-import { defineProps, defineExpose, ref } from 'vue';
-import { isErrorResponse, FS } from '@/api';
-import { NProgress } from 'naive-ui';
-import filesize from 'filesize';
+import type { Status } from "naive-ui/es/progress/src/interface";
+import { defineProps, defineExpose, ref } from "vue";
+import { isErrorResponse, FS } from "@/api";
+import { NProgress } from "naive-ui";
+import filesize from "filesize";
 
 const props = defineProps<{
-	file: File;
+  file: File;
 }>();
 
 const progress = ref(0);
 const percentage = ref(0);
-const err = ref('');
-const status = ref('info');
+const err = ref("");
+const status = ref<Status>("info");
 
 async function startUpload(parent: number, token: string) {
-	const resp = await FS.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';
+  const resp = await FS.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
+  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"
-	/>
+  <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

@@ -1,48 +1,44 @@
 <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';
+import type { TokenInjectType } from "@/api";
+import { defineProps, defineExpose, ref, inject } from "vue";
+import { check_token } from "@/api";
+import UploadEntry from "@/components/UploadDialog/UploadEntry.vue";
+import { NCard } from "naive-ui";
 
-const jwt = inject<TokenInjectType>('jwt') as TokenInjectType;
+const jwt = inject<TokenInjectType>("jwt") as TokenInjectType;
 
 const entries = ref<typeof UploadEntry[]>([]);
 const done = ref(false);
-let canCloseResolve = null;
+let canCloseResolve: (value: unknown) => void = () => 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;
+  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
+  startUpload,
 });
 defineProps<{
-	files: File[];
+  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>
+  <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(null)">Close</button>
+    </div>
+  </n-card>
 </template>
 
 <style scoped></style>