chore: test html form submission

Author: mtdvlpr

app/pages/translate/outlines/new.vue

@@ -0,0 +1,93 @@
+<template>
+  <UPage>
+    <UPageHeader
+      :title="title"
+      headline="Vertalen"
+      :description="description"
+    />
+
+    <UPageBody>
+      <form method="post" action="/api/outlines" enctype="multipart/form-data">
+        <!-- <UFileUpload
+            v-model="jwpubFile"
+            name="file"
+            :file-delete="false"
+            accept=".jwpub,.JWPUB"
+            class="w-full min-h-48"
+            :disabled="!!jwpubFile"
+            label="Importeer vanuit S-34 formulier."
+          /> -->
+        <input name="file" type="file" accept=".jwpub,.JWPUB" />
+        <UButton class="mr-2" type="reset" color="error" label="Reset" />
+        <UButton type="submit" label="Importeren" />
+      </form>
+      <template v-if="loading">
+        <UPageGrid>
+          <div v-for="i in 12" :key="i" class="grid gap-2">
+            <USkeleton class="h-4 w-3xs" />
+            <USkeleton class="h-4 w-20" />
+            <USkeleton class="h-4 w-full" />
+          </div>
+        </UPageGrid>
+      </template>
+      <template v-else>
+        <UPageGrid>
+          <OutlineForm
+            v-for="outline in jsonStore.originals.outlines"
+            :id="`outline-${outline.number}`"
+            :key="outline.number"
+            :outline="outline"
+          />
+        </UPageGrid>
+      </template>
+    </UPageBody>
+  </UPage>
+</template>
+<script setup lang="ts">
+const jsonStore = useJsonStore();
+
+const loading = ref(false);
+const jwpubFile = ref<File | null>(null);
+
+const { showError } = useFlash();
+
+const _importOutlines = async () => {
+  if (!jwpubFile.value) return;
+
+  loading.value = true;
+  try {
+    const body = new FormData();
+    body.append("file", jwpubFile.value);
+    const parsedOutlines = await $fetch<Outline[]>("/api/outlines", {
+      body,
+      method: "POST",
+    });
+
+    const outlines =
+      jsonStore.outlines.translations?.map((outline) => ({
+        ...outline,
+        ...(parsedOutlines.find((o) => o.number === outline.number) ?? {}),
+      })) ?? [];
+
+    jsonStore.setTranslations({ outlines }, "outlines");
+  } catch {
+    showError({
+      description:
+        "Er is een fout opgetreden bij het importeren van de lezingen.",
+      id: "import-outlines-error",
+    });
+  }
+  loading.value = false;
+  jwpubFile.value = null;
+};
+
+const title = "Lezingen";
+const description = "Vertaal op deze pagina de lezingen.";
+
+useSeoMeta({
+  description,
+  ogDescription: description,
+  ogTitle: title,
+  title,
+});
+</script>

server/utils/blob.ts

@@ -26,26 +26,30 @@ export async function receiveFiles(
     multiple: true,
   } satisfies BlobUploadOptions);
 
-  const form = await readFormData(event);
-  const files = form.getAll(options.formKey!) as File[];
+  try {
+    const form = await readFormData(event);
+    const files = form.getAll(options.formKey!) as File[];
 
-  if (!files?.length) throw new Error("No files received");
+    if (!files?.length) throw new Error("No files received");
 
-  if (!options.multiple && files.length > 1)
-    throw new Error("Multiple files are not allowed");
+    if (!options.multiple && files.length > 1)
+      throw new Error("Multiple files are not allowed");
 
-  if (typeof options.multiple === "number" && files.length > options.multiple)
-    throw new Error(
-      `Number of files exceeded. Maximum allowed: ${options.multiple}`,
-    );
+    if (typeof options.multiple === "number" && files.length > options.multiple)
+      throw new Error(
+        `Number of files exceeded. Maximum allowed: ${options.multiple}`,
+      );
 
-  if (options.ensure?.maxSize || options.ensure?.types?.length) {
-    for (const file of files) {
-      ensureBlob(file, options.ensure);
+    if (options.ensure?.maxSize || options.ensure?.types?.length) {
+      for (const file of files) {
+        ensureBlob(file, options.ensure);
+      }
     }
+    return files;
+  } catch (e) {
+    console.error(e);
+    throw new Error("Error receiving files", { cause: e });
   }
-
-  return files;
 }
 
 /**