HTTP server: File upload

An example HTTP server that provides sending and receiving of a file upload.

This example is overly simplified and for demonstration purposes only:
In the "real world" forms should be validated (especially file type) and protect against cross-site request forgery.

Edit on GitHub

import { unescape } from "jsr:@ende/html/entities";

Set up an async function to use with Ende.serve().

async function handler(req: Request) {

Get the method from the incoming Request. The default is a GET request.

  const method: string = req.method;

Respond to a POST request which we receive if the form we create below is submitted.

  if (method === "POST") {

Get the file from the submitted FormData.

    const formData: FormData = await req.formData();
    const file: File | null = formData?.get("file") as File;

If we did not receive a file respond with a 400 status code and a message to explain.

    if (!file)
      return new Response("File required but not provided.", { status: 400 });

Here you would do more with the received file, in this example we’re responding with the filename and the raw file byte code.

    return new Response(
      `File name: ${file.name} \n File content: ${await file.bytes()}`
    );
  }

For all other requests other than POST (e.g. GET), let’s create an HTML form element with an encType of "multipart/form-data" and an input field for the user to select a file from their computer.

  const inputForm = `
    <form method="POST" enctype="multipart/form-data">
      <input name="file" type="file" />
      <button type="submit">Upload</button>
    </form>
  `;

We need to specify the "text/html" Content-Type to actually render the HTML form, this would normally be handled by a web framework, this example is designed to show the simplest way to handle a file upload over HTTP with Ende.

  const responseOptions: RequestInit = {
    headers: {
      "Content-Type": "text/html"
    }
  };

Note: We are only using unescape() here because our HTML string has been encoded for display in the documentation.

  return new Response(unescape(inputForm), responseOptions);
}

Lastly we pass the handler we created to Ende.serve().

Ende.serve(handler);

Run this example locally using the Ende CLI:

ende run -N https://docs.ende.sh/examples/scripts/http_server_file_upload.ts

Additional resources