Add error handling and improve file upload UX

src/components/dashboard/UploadModal.svelte

@@ -21,7 +21,7 @@
     import {createEventDispatcher} from "svelte";
     import {schemRepo} from "@repo/schem.ts";
     import SWModal from "@components/styled/SWModal.svelte";
-    import {t} from "astro-i18n"
+    import {t} from "astro-i18n";
 
     const dispatch = createEventDispatcher();
 
@@ -29,11 +29,13 @@
         open?: boolean;
     }
 
-  let { open = $bindable(false) }: Props = $props();
+    let {open = $bindable(false)}: Props = $props();
 
-    async function upload() {
+    async function upload(e: Event) {
+        e.stopPropagation();
         if (uploadFile == null) {
-            return
+            error = "dashboard.schematic.errors.noFile";
+            return;
         }
         let file = uploadFile[0];
 
@@ -42,33 +44,46 @@
         let type = name.split(".").pop();
 
         if (type !== "schem" && type !== "schematic") {
-            return
+            error = "dashboard.schematic.errors.invalidEnding";
+            return;
         }
 
         let content = await file.arrayBuffer();
 
-        // @ts-ignore
         let b64 = btoa(String.fromCharCode.apply(null, new Uint8Array(content)));
 
-        let response = await $schemRepo.uploadSchematic(name, b64);
+        try {
+            await $schemRepo.uploadSchematic(name, b64);
 
             open = false;
             value = "";
-        dispatch("reset")
+            dispatch("reset");
+        } catch (e) {
+            error = "dashboard.schematic.errors.upload";
+        }
+    }
+
+    function reset(e: Event) {
+        e.stopPropagation();
+        open = false
+        value = "";
     }
 
     let uploadFile: FileList | null = $state(null);
     let value = $state("");
+    let error = $state(null)
 </script>
 
 <SWModal title={t("dashboard.schematic.title")} bind:open>
     <form>
-        <input type="file" bind:files={uploadFile} bind:value />
+        <label for="schem-upload">{t("dashboard.schematic.title")}</label>
+        <input type="file" id="schem-upload" bind:files={uploadFile} class="overflow-ellipsis" bind:value accept=".schem, .schematic"/>
+        {#if error !== null}
+            <p class="text-red-400">{t(error)}</p>
+        {/if}
     </form>
     {#snippet footer()}
-  
-          <button class="btn !ml-auto" onclick={upload}>{t("dashboard.schematic.upload")}</button>
-          <button class="btn btn-gray" onclick={() => open = false}>{t("dashboard.schematic.cancel")}</button>
-      
+        <button class="btn" onclick={upload}>{t("dashboard.schematic.upload")}</button>
+        <button class="btn btn-gray" onclick={reset}>{t("dashboard.schematic.cancel")}</button>
     {/snippet}
 </SWModal>

src/components/styled/SWModal.svelte

@@ -68,16 +68,18 @@
     })
 </script>
 
-<dialog bind:this={dialog} onclose={close} onclick={(e) => dialog.close()} aria-hidden="true" class="max-h-full max-w-md w-full rounded-lg shadow-lg dark:bg-neutral-800 dark:text-neutral-100">
-    <div onclick={stopPropagation(onclick)} aria-hidden="true">
+<dialog bind:this={dialog} onclose={close} onclick={(e) => dialog.close()} aria-hidden="true" class="max-h-full min-w-md w-fit rounded-lg shadow-lg dark:bg-neutral-800 dark:text-neutral-100">
+    <div onclick={stopPropagation(onclick)} aria-hidden="true" class="w-fit">
         <div class="p-6 border-b border-neutral-200 dark:border-neutral-700">
             <h1 class="text-4xl font-bold">{title}</h1>
         </div>
         <div class="p-6 main border-b border-neutral-200 dark:border-neutral-700">
             {@render children?.()}
         </div>
-        <div class="flex mx-4 my-2 p-6" onclick={() => dialog.close()} aria-hidden="true">
+        <div class="mx-4 my-2 p-6">
+            <div class="ml-auto flex justify-end" onclick={() => dialog.close()} aria-hidden="true">
                 {@render footer?.()}
             </div>
         </div>
+    </div>
 </dialog>

src/i18n/common/de.json

@@ -200,7 +200,12 @@
         }
       },
       "cancel": "Abbrechen",
-      "title": "Schematic hochladen"
+      "title": "Schematic hochladen",
+      "errors": {
+        "invalidEnding": "Diese Dateiendung kann nicht Hochgeladen werden.",
+        "noFile": "Keine Datei.",
+        "upload": "Fehler beim Hochladen, Überprüfe deine Schematic!"
+      }
     }
   },
   "login": {

src/i18n/common/en.json

@@ -137,6 +137,11 @@
           "download": "Download",
           "close": "Close"
         }
+      },
+      "errors": {
+        "invalidEnding": "This file extension cannot be uploaded.",
+        "noFile": "No file.",
+        "upload": "Error uploading, check your schematic!"
       }
     }
   },