<!-- src/routes/newsletter/+page.svelte -->
<form
  method="post"
  action="/newsletter"
  enctype="multipart/form-data"
>
  <input type="text" name="name" />
  <input type="email" name="email" />
  <input type="file" name="image" accept="image/*" />
  <button type="submit">Submit</button>
</form>

// src/routes/newsletter/+page.server.ts
import type { Action } from "./$types";

export const POST: Action = async ({ request }) => {
  // Grab the form data from the request
  const values = await request.formData();

  // Get a value from the form:
  const name = values.get("name") as string;

  // Getting a file file:
  const file = values.get("image") as File;

  // Get the text value of the file:
  const text = await file.text();

  // Get an array of values (useful for checkboxes and selects):
  const flavors = values.getAll("ice-cream-flavors") as string[];
  // ["vanilla", "toffee", "caramel"]

  // Check if a value exists (useful for boolean checkboxes):
  const agreed = values.has("agree-to-terms");
  // true

  // Get all items in the form in an "entries" type array:
  const items = [...values.entries()];
  // [ [ "name": "Rich Harris" ], [ "hobbies", "svelte" ], [ "hobbies": "journalism" ] ]

  // Get each keys:
  const keys = [...values.keys()];
  // [ "name", "hobbies", "hobbies" ]

  // Get all values:
  const vals = [...values.values()];
  // [ [ "Rich Harris" ], [ "svelte" ], [ "journalism" ] ]

  // And to get all the form data as an object:
  const obj = Object.fromEntries(values.entries());
  // { name: "Rich Harris", hobbies: "journalism" }
  // Note here how any grouped values from multi-selects or checkboxes will only return the last value received.
  // I recommend against using this in those (or most) cases.

  return { location: "/" };
};

// src/lib/form-helpers.ts
type StructuredFormData =
  | string
  | boolean
  | number
  | File
  | StructuredFormData[];

export function formBody(body: FormData) {
  return [...body.entries()].reduce((data, [k, v]) => {
    let value: StructuredFormData = v;
    if (v === "true") value = true;
    if (v === "false") value = false;
    if (!isNaN(Number(v))) value = Number(v);

    // For grouped fields like multi-selects and checkboxes, we need to
    // store the values in an array.
    if (k in data) {
      const val = data[k];
      value = Array.isArray(val) ? [...val, value] : [val, value];
    }

    data[k] = value;

    return data;
  }, {} as Record<string, StructuredFormData>);
}

// Usage:
// src/routes/newsletter/+page.server.ts
import type { Action } from "./$types";
import { formBody } from "$lib/form-helpers";

export const POST: Action = async ({ request }) => {
  const values = await request.formData();
  const body = formBody(values);
  // Do something with the data...
  return { location: "/" };
};

<script>
  let submit

  function handleSubmit() {
    // Send a POST request to src/routes/contact/+server.ts endpoint
    submit = fetch('/contact', {
      method: 'POST',
      body: JSON.stringify({ foo: 'bar' }),
      headers: { 'content-type': 'application/json' },
    })
      .then((resp) => resp.json())
      .finally(() => setTimeout(() => (submit = null), 5000))
  }
</script>

{#if submit}
  {#await submit}
    <p>Sending...</p>
  {:then resp}
    <p>🎉 Done!</p>
    <pre>RESPONSE: {JSON.stringify(resp, null, 2)}</pre>
  {/await}
{/if}
<form on:submit|preventDefault={handleSubmit} method="post">
  <input type="text" name="email" />
  <button type="submit">Submit</button>
</form>

import type { RequestHandler } from "./$types";

export const POST: RequestHandler = (req) => {
  // Simulate a delay... instead you'd do something interesting here...
  await new Promise((resolve) => setTimeout(resolve, 500))

  return new Response(
    JSON.stringify({ success: true }),
    {
      status: 200, 
      headers: { 'content-type': 'application/json' }
    }
  )
}