Add language field

src/lib/api/documents.ts

@@ -100,7 +100,7 @@ export async function create(
   });
 
   if (isErrorCode(resp.status)) {
-    console.error(await resp.json());
+    console.error(await resp.text());
     error(resp.status, resp.statusText);
   }
 

src/lib/components/forms/DocumentUpload.svelte

@@ -18,6 +18,7 @@
   import AccessLevel from "../inputs/AccessLevel.svelte";
   import Dropzone from "../inputs/Dropzone.svelte";
   import FileInput from "../inputs/File.svelte";
+  import Language from "../inputs/Language.svelte";
   import Select from "../inputs/Select.svelte";
   import Switch from "../inputs/Switch.svelte";
   import Text from "../inputs/Text.svelte";
@@ -95,7 +96,7 @@
               {formatFileType(file.type)} / {filesize(file.size)}
             </p>
             <div class="title">
-              <Text name="title" bind:value={file.name} />
+              <Text name="title" bind:value={file.name} required />
               <input type="hidden" name="filename" value={file.name} />
             </div>
             <button
@@ -147,6 +148,10 @@
           />
         </Field>
         <hr class="divider" />
+        <Field>
+          <FieldLabel>Language</FieldLabel>
+          <Language />
+        </Field>
         <Field>
           <FieldLabel>OCR Engine</FieldLabel>
           <Select

src/lib/components/inputs/Language.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import Select from "./Select.svelte";
+  import {
+    DEFAULT_LANGUAGE,
+    LANGUAGE_CODES,
+    LANGUAGE_NAMES,
+  } from "@/config/config.js";
+
+  interface Item {
+    label: string;
+    value: any;
+  }
+
+  export let name = "language";
+  export let value: string | string[] | Item = DEFAULT_LANGUAGE;
+  export let required = false;
+  export let placeholder: string = "";
+  export let multiple = false;
+
+  const items = LANGUAGE_CODES.map((code, i) => ({
+    value: code,
+    label: LANGUAGE_NAMES[i],
+  }));
+</script>
+
+<Select {name} {items} {required} {placeholder} {multiple} bind:value />

src/lib/components/inputs/Select.svelte

@@ -1,3 +1,5 @@
+<svelte:options accessors />
+
 <!-- @component
   `svelte-select` provides a flexible, customizable basis for the InputSelect component.
 
@@ -8,6 +10,20 @@
   create a custom Select implementation and give it the `select` class.
 -->
 
+<script context="module" lang="ts">
+  /**
+   * Select wraps values in an object, which turns into a JSON string in HTML.
+   * This function will unwrap it.
+   */
+  export function unwrap(value: string, fallback: any = null): any {
+    try {
+      return JSON.parse(value).value;
+    } catch {
+      return fallback;
+    }
+  }
+</script>
+
 <script lang="ts">
   import Select from "svelte-select";
   import { ChevronDown16, X12, X16 } from "svelte-octicons";
@@ -18,6 +34,7 @@
   export let itemId: string = "value";
   export let label: string = "label";
   export let value: any = null;
+  export let justValue: any = null; // read-only; don't set this
   export let multiple = false;
   export let clearable = false;
   export let placeholder: string = multiple ? "Select multiple" : "Select one";
@@ -33,6 +50,7 @@
   {itemId}
   {label}
   bind:value
+  bind:justValue
   showChevron
   --background="var(--White, #fff)"
   --border="1px solid var(--gray-3, #99a8b3)"

src/lib/components/inputs/Text.svelte

@@ -6,9 +6,20 @@
   export let name: string = null;
   export let placeholder = "";
   export let value = "";
+  export let required = false;
 </script>
 
-<input type="text" {name} {placeholder} bind:value on:change />
+<input
+  type="text"
+  {name}
+  {placeholder}
+  {required}
+  bind:value
+  on:change
+  on:input
+  on:focus
+  on:blur
+/>
 
 <style>
   input {

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

@@ -0,0 +1,17 @@
+<script context="module" lang="ts">
+  import { Story, Template } from "@storybook/addon-svelte-csf";
+  import Language from "../Language.svelte";
+
+  export const meta = {
+    title: "Components / Inputs / Language",
+    component: Language,
+    tags: ["autodocs"],
+    parameters: { layout: "centered" },
+  };
+</script>
+
+<Template let:args>
+  <Language {...args} />
+</Template>
+
+<Story name="default" />

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

@@ -6,8 +6,9 @@ import type {
   Project,
 } from "$lib/api/types";
 
-import { CSRF_COOKIE_NAME } from "@/config/config.js";
+import { CSRF_COOKIE_NAME, DEFAULT_LANGUAGE } from "@/config/config.js";
 import * as documents from "$lib/api/documents";
+import { unwrap } from "$lib/components/inputs/Select.svelte";
 
 export const actions = {
   default: async ({ request, cookies, fetch }) => {
@@ -23,19 +24,18 @@ export const actions = {
     const access = form.get("access") as Access;
 
     // value is a JSON string
-    const ocr_engine: OCREngine = JSON.parse(form.get("ocr_engine") as string);
+    const ocr_engine: OCREngine = unwrap(form.get("ocr_engine") as string);
     const force_ocr = Boolean(form.get("force_ocr"));
     const revision_control = Boolean(form.get("revision_control"));
-    const projects = JSON.parse((form.get("projects") as string) || "[]");
-
-    // not yet implemented
-    // const language = data.get("language");
+    const projects = unwrap(form.get("projects") as string, []);
+    const language = unwrap(form.get("language") as string, DEFAULT_LANGUAGE);
 
     // put things together
     const docs: DocumentUpload[] = titles.map((title, i) => {
       return {
         title,
         access,
+        language,
         projects: projects.map((p: Project) => p.id),
         revision_control,
       };