Log inSign up
stevekrouse avatar
Public
HTTP (deprecated)
Fork
0 Likes
Val Town is a social website to write and deploy JavaScript.
Build APIs and schedule functions from your browser.
Sign up with GitHub
Readme

Example of an HTML Form with a File Upload, handled by the server

The key step was setting enctype="multipart/form-data" on the <form> element. If you skip that step, you'll only get the file's name on the server.

Limitation on files > 1mb

Currently (as of 4/14/24) this only works for small files (< 1mb). For larger files you get an error: {"statusCode":413,"error":"Payload Too Large","message":"request entity too large"}.

A workaround is to upload to another service client-side, send the URL from that service to your Val Town server, and then fetch the file server-side (helper: @stevekrouse/uploadTo0x0).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/** @jsxImportSource npm:hono@3/jsx */
import { Hono } from "npm:hono@3";
const app = new Hono();
app.get("/", (c) =>
c.html(
<form action="/" method="post" enctype="multipart/form-data">
<input type="file" accept="image/*" name="file">Upload photo</input>
<button type="submit">Submit</button>
</form>,
));
app.post("/", async (c) => {
const formData = await c.req.formData();
const file = formData.get("file");
return c.newResponse(file);
});
export default app.fetch;
stevekrouse-fileinputuploadexample.web.val.run
April 14, 2024