Page layout, raising errors and formatting filenames

src/lib/api/documents.ts

@@ -100,8 +100,7 @@ export async function create(
   });
 
   if (isErrorCode(resp.status)) {
-    console.error(await resp.text());
-    error(resp.status, resp.statusText);
+    throw new Error(await resp.text());
   }
 
   return resp.json() as Promise<Document[]>;

src/lib/components/forms/DocumentUpload.svelte

@@ -66,6 +66,11 @@
     return "unknown";
   }
 
+  function filenameToTitle(filename: string): string {
+    const [name, ...ext] = filename.split(".");
+    return name.replace(/_/g, " ").replace(/([A-Z])/g, " $1");
+  }
+
   $: total = files.reduce((t, file) => {
     return t + file.size;
   }, 0);
@@ -89,14 +94,17 @@
 >
   <Flex gap={1} align="stretch" wrap>
     <div class="files">
+      <!-- add any header and messaging using this slot -->
+      <slot />
+
       <div class="fileList" class:empty={files.length === 0}>
         {#each files as file, index}
           <Flex align="center" gap={1}>
             <p class="fileInfo">
               {formatFileType(file.type)} / {filesize(file.size)}
             </p>
             <div class="title">
-              <Text name="title" bind:value={file.name} required />
+              <Text name="title" value={filenameToTitle(file.name)} required />
               <input type="hidden" name="filename" value={file.name} />
             </div>
             <button

src/lib/components/inputs/stories/Language.stories.svelte

@@ -15,3 +15,5 @@
 </Template>
 
 <Story name="default" />
+
+<Story name="multiple" args={{ multiple: true }} />

src/routes/app/upload/+page.server.ts

@@ -1,6 +1,7 @@
 import type { Actions } from "./$types";
 import type {
   Access,
+  Document,
   DocumentUpload,
   OCREngine,
   Project,
@@ -41,7 +42,15 @@ export const actions = {
       };
     });
 
-    const created = await documents.create(docs, csrf_token, fetch);
+    let created: Document[];
+    try {
+      created = await documents.create(docs, csrf_token, fetch);
+    } catch (err) {
+      return {
+        success: false,
+        error: err,
+      };
+    }
 
     // upload
     const uploads = created.map((d, i) => ({

src/routes/app/upload/+page.svelte

@@ -9,19 +9,19 @@
   <title>Upload | DocumentCloud</title>
 </svelte:head>
 
-<Flex direction="column">
-  <h1>Upload documents</h1>
+<DocumentUpload>
+  <Flex direction="column">
+    <h1>Upload documents</h1>
 
-  {#if form?.success}
-    <p>
-      {form.message}
-    </p>
-  {:else}
-    <p>
-      Select or drag a document to begin the document upload process. You will
-      then be able to edit document information.
-    </p>
-  {/if}
-
-  <DocumentUpload />
-</Flex>
+    {#if form?.success}
+      <p>
+        {form.message}
+      </p>
+    {:else}
+      <p>
+        Select or drag a document to begin the document upload process. You will
+        then be able to edit document information.
+      </p>
+    {/if}
+  </Flex>
+</DocumentUpload>