Skip to main content

Handling FormData

Zuplo supports working with FormData including multipart/form-data. In this simple example we show how you can parse a multipart entry and read the stream into memory for use in the Zuplo runtime.

In this case, we upload a JSON file as a multipart/form-data entry using Insomnia, with a key foo

Insomnia multipart/form-data

We can then handle this programmatically inside Zuplo using a function handler. We also modify the JSON before forwarding on to the target backend server.

import { ZuploContext, ZuploRequest } from "@zuplo/runtime";

// FormData can return different types in different circumstances
// use this function to convert both to strings
async function readFileOrStringContent(data: unknown) {
if (data.constructor.name === "File") {
return await (data as File).text();
}
return data as string;
}

export default async function (request: ZuploRequest, context: ZuploContext) {
const formData = await request.formData();

// read the form-data entry as a 'Blob' type
const blob = formData.get("foo");

// stream the body into memory
const json = await readFileOrStringContent(blob);

// parse the JSON document
const object = JSON.parse(json);

// Modify the document somehow before forwarding on to the backend
object.newKey = "newValue";

// Make a standard POST to a backend with a JSON body
const response = fetch("https://backend-origin.com/example", {
method: "POST",
headers: {
"content-type": "application/json",
},
body: JSON.stringify(object, null, 2),
});

return response;
}