fix: show file upload errors

frontend/src/api/tus.ts

@@ -55,12 +55,22 @@ export async function upload(
 
         return true;
       },
-      onError: function (error) {
+      onError: function (error: Error | tus.DetailedError) {
         if (CURRENT_UPLOAD_LIST[filePath].interval) {
           clearInterval(CURRENT_UPLOAD_LIST[filePath].interval);
         }
         delete CURRENT_UPLOAD_LIST[filePath];
-        reject(new Error(`Upload failed: ${error.message}`));
+
+        const message =
+          error instanceof tus.DetailedError
+            ? error.originalResponse === null
+              ? "000 No connection"
+              : error.originalResponse.getBody()
+            : "Upload failed";
+
+        console.error(error);
+
+        reject(new Error(message));
       },
       onProgress: function (bytesUploaded) {
         const fileData = CURRENT_UPLOAD_LIST[filePath];

frontend/src/components/Sidebar.vue

@@ -132,7 +132,6 @@ import {
 import { files as api } from "@/api";
 import ProgressBar from "@/components/ProgressBar.vue";
 import prettyBytes from "pretty-bytes";
-import { StatusError } from "@/api/utils.js";
 
 const USAGE_DEFAULT = { used: "0 B", total: "0 B", usedPercentage: 0 };
 
@@ -181,13 +180,9 @@ export default {
           total: prettyBytes(usage.total, { binary: true }),
           usedPercentage: Math.round((usage.used / usage.total) * 100),
         };
-      } catch (error) {
-        if (error instanceof StatusError && error.is_canceled) {
-          return;
-        }
-        this.$showError(error);
-      }
+      } finally {
         return Object.assign(this.usage, usageStats);
+      }
     },
     toRoot() {
       this.$router.push({ path: "/files" });

frontend/src/views/Files.vue

@@ -26,6 +26,7 @@
 import {
   computed,
   defineAsyncComponent,
+  inject,
   onBeforeUnmount,
   onMounted,
   onUnmounted,
@@ -50,6 +51,8 @@ import { name } from "../utils/constants";
 const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
 const Preview = defineAsyncComponent(() => import("@/views/files/Preview.vue"));
 
+const $showError = inject<IToastError>("$showError")!;
+
 const layoutStore = useLayoutStore();
 const fileStore = useFileStore();
 const uploadStore = useUploadStore();
@@ -109,7 +112,7 @@ watch(reload, (newValue) => {
   newValue && fetchData();
 });
 watch(uploadError, (newValue) => {
-  newValue && layoutStore.showError();
+  newValue && $showError(newValue);
 });
 
 // Define functions