Fix error display during upload after refactor

frontend/src/stores/upload.js

@@ -19,6 +19,7 @@ export const useUploadStore = defineStore("upload", {
     progress: [],
     queue: [],
     uploads: {},
+    error: null,
   }),
   getters: {
     // user and jwt getter removed, no longer needed
@@ -68,6 +69,9 @@ export const useUploadStore = defineStore("upload", {
       // Vue.set(this.progress, id, loaded);
       this.progress[id] = loaded;
     },
+    setError(error) {
+      this.error = error;
+    },
     reset() {
       this.id = 0;
       this.sizes = [];
@@ -130,8 +134,7 @@ export const useUploadStore = defineStore("upload", {
         this.moveJob();
 
         if (item.file.isDir) {
-          // TODO: find a way to display notification
-          await api.post(item.path).catch(console.error);
+          await api.post(item.path).catch(this.setError);
         } else {
           let onUpload = throttle(
             (event) =>
@@ -143,10 +146,9 @@ export const useUploadStore = defineStore("upload", {
             { leading: true, trailing: false }
           );
 
-          // TODO: find a way to display notification
           await api
             .post(item.path, item.file, item.overwrite, onUpload)
-            .catch(console.error);
+            .catch(this.setError);
         }
 
         this.finishUpload(item);

frontend/src/views/Files.vue

@@ -25,6 +25,7 @@ import { files as api } from "@/api";
 import { mapState, mapActions, mapWritableState } from "pinia";
 import { useFileStore } from "@/stores/file";
 import { useLayoutStore } from "@/stores/layout";
+import { useUploadStore } from "@/stores/upload";
 
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Breadcrumbs from "@/components/Breadcrumbs.vue";
@@ -52,6 +53,7 @@ export default {
       width: window.innerWidth,
     };
   },
+  inject: ["$showError"],
   computed: {
     ...mapWritableState(useFileStore, [
       "req",
@@ -62,6 +64,9 @@ export default {
     ]),
     ...mapState(useLayoutStore, ["show", "showShell"]),
     ...mapWritableState(useLayoutStore, ["loading"]),
+    ...mapState(useUploadStore, {
+      uploadError: "error",
+    }),
     currentView() {
       if (this.req.type == undefined) {
         return null;
@@ -89,6 +94,9 @@ export default {
         this.fetchData();
       }
     },
+    uploadError(newValue, oldValue) {
+      newValue && newValue !== oldValue && this.$showError(this.uploadError);
+    },
   },
   mounted() {
     this.isFiles = true;