Form

From 404b90badc5856a74c06d04062c850003e28fed5 Mon Sep 17 00:00:00 2001 From: Colin McDonnell Date: Mon, 31 Jul 2023 12:20:23 -0700 Subject: Add ecosystem guides (#3847) * Add ecosystem guides * Update titles * Rename stric * Add unlink and fetch guides * Add formdata guide * Tweak title * Moar --- docs/guides/http/file-uploads.md | 94 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 94 insertions(+) create mode 100644 docs/guides/http/file-uploads.md (limited to 'docs/guides/http/file-uploads.md') diff --git a/docs/guides/http/file-uploads.md b/docs/guides/http/file-uploads.md new file mode 100644 index 000000000..a708a238a --- /dev/null +++ b/docs/guides/http/file-uploads.md @@ -0,0 +1,94 @@ +--- +name: Upload files via HTTP using FormData +--- + +To upload files via HTTP with Bun, use the [`FormData`](https://developer.mozilla.org/en-US/docs/Web/API/FormData) API. Let's start with a HTTP server that serves a simple HTML web form. + +```ts#index.ts +const server = Bun.serve({ + port: 4000, + async fetch(req) { + const url = new URL(req.url); + + // return index.html for root path + if (url.pathname === "/") + return new Response(Bun.file("index.html"), { + headers: { + "Content-Type": "text/html", + }, + }); + + return new Response("Not Found", { status: 404 }); + }, +}); + +console.log(`Listening on http://localhost:${server.port}`); +``` + +--- + +We can define our HTML form in another file, `index.html`. + +```html#index.html + + + + + Form + + + + + +``` + +--- + +At this point, we can run the server and visit [`localhost:4000`](http://localhost:4000) to see our form. + +```bash +$ bun run index.ts +Listening on http://localhost:4000 +``` + +--- + +Our form will send a `POST` request to the `/action` endpoint with the form data. Let's handle that request in our server. + +First we use the [`.formData()`](https://developer.mozilla.org/en-US/docs/Web/API/Request/formData) method on the incoming `Request` to asynchonously parse its contents to a `FormData` instance. Then we can use the [`.get()`](https://developer.mozilla.org/en-US/docs/Web/API/FormData/get) method to extract the value of the `name` and `profilePicture` fields. Here `name` corresponds to a `string` and `profilePicture` is a `Blob`. + +Finally, we write the `Blob` to disk using [`Bun.write()`](/docs/api/file-io#writing-files-bun-write). + +```ts-diff#index.ts +const server = Bun.serve({ + port: 4000, + async fetch(req) { + const url = new URL(req.url); + + // return index.html for root path + if (url.pathname === "/") + return new Response(Bun.file("index.html"), { + headers: { + "Content-Type": "text/html", + }, + }); + ++ // parse formdata at /action ++ if (url.pathname === '/action') { ++ const formdata = await req.formData(); ++ const name = formdata.get('name'); ++ const profilePicture = formdata.get('profilePicture');+ ++ if (!profilePicture) throw new Error('Must upload a profile picture.'); ++ // write profilePicture to disk ++ await Bun.write('profilePicture.png', profilePicture); ++ return new Response("Success"); ++ } + + return new Response("Not Found", { status: 404 }); + }, +}); +``` -- cgit v1.2.3