Loading state

MuckRock · Apr 11, 2024 · 6c75074 · 6c75074
1 parent 17fe3cf
commit 6c75074
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 9 deletions.
diff --git a/src/lib/components/forms/DocumentUpload.svelte b/src/lib/components/forms/DocumentUpload.svelte
@@ -128,6 +128,7 @@
   let files: File[] = [];
   let projects: Project[] = [];
 
+  let loading = false;
   let uploader: HTMLInputElement;
 
   let fileDropActive: boolean;
@@ -171,22 +172,26 @@
 
   function filenameToTitle(filename: string): string {
     const [name, ...ext] = filename.split(".");
-    return name.replace(/_/g, " ").replace(/([A-Z])/g, " $1");
+    return name.replace(/_/g, " ");
   }
 
   // handle uploads client side instead of going through the server
   async function onSubmit(e: SubmitEvent) {
+    loading = true;
     const form = e.target as HTMLFormElement;
     const fd = new FormData(form);
 
     const result = await upload(fd, csrf_token);
 
     // send data up
-    applyAction(result);
+    await applyAction(result);
 
     if (result.type === "success") {
       form.reset();
+      files = [];
     }
+
+    loading = false;
   }
 
   afterUpdate(() => {
@@ -240,7 +245,11 @@
         </div>
       </div>
       <div class="fileUpload">
-        <Dropzone bind:active={fileDropActive} onDrop={addFiles}>
+        <Dropzone
+          bind:active={fileDropActive}
+          onDrop={addFiles}
+          disabled={loading}
+        >
           <div class="fileDrop" class:active={fileDropActive}>
             <p class="drop-instructions">Drag and drop files here</p>
             <Flex align="center" justify="center">
@@ -310,7 +319,8 @@
           </Field>
         </Premium>
       </Flex>
-      <Button type="submit" full mode="primary"><Upload16 />Begin Upload</Button
+      <Button type="submit" full mode="primary" disabled={loading}
+        ><Upload16 />Begin Upload</Button
       >
 
       <input

diff --git a/src/routes/app/upload/+page.svelte b/src/routes/app/upload/+page.svelte
@@ -1,9 +1,11 @@
 <script lang="ts">
-  import type { ActionData } from "./$types";
+  import { page } from "$app/stores";
+
   import Flex from "$lib/components/common/Flex.svelte";
   import DocumentUpload from "$lib/components/forms/DocumentUpload.svelte";
 
-  export let form: ActionData;
+  // using $page.form captures the correct type from applyAction
+  $: form = $page.form;
 </script>
 
 <svelte:head>
@@ -14,11 +16,11 @@
   <Flex direction="column">
     <h1>Upload documents</h1>
 
-    {#if form?.type === "success"}
+    {#if form?.success}
       <p>
-        {form.data?.message}
+        {form?.message}
       </p>
-    {:else if form?.type === "error"}
+    {:else if form?.error}
       <p class="error">
         {form?.error}
       </p>