Send form as urlencoded to avoid multipart issues
This commit is contained in:
parent
5f01d89a62
commit
c8ae9caa35
2 changed files with 85 additions and 52 deletions
|
|
@ -13,13 +13,33 @@ const jsonResponse = (data: Record<string, unknown>, status = 200) =>
|
|||
|
||||
const readFormField = (value: FormDataEntryValue | null) =>
|
||||
typeof value === "string" ? value.trim() : "";
|
||||
const readTextField = (value: string | null) => (value ?? "").trim();
|
||||
|
||||
const parseFormFields = async (request: Request) => {
|
||||
const contentType = request.headers.get("content-type") ?? "";
|
||||
if (contentType.includes("application/x-www-form-urlencoded")) {
|
||||
const bodyText = await request.text();
|
||||
const params = new URLSearchParams(bodyText);
|
||||
return {
|
||||
name: readTextField(params.get("name")),
|
||||
email: readTextField(params.get("email")),
|
||||
message: readTextField(params.get("message")),
|
||||
turnstileToken: readTextField(params.get("cf-turnstile-response")),
|
||||
};
|
||||
}
|
||||
|
||||
const formData = await request.formData();
|
||||
return {
|
||||
name: readFormField(formData.get("name")),
|
||||
email: readFormField(formData.get("email")),
|
||||
message: readFormField(formData.get("message")),
|
||||
turnstileToken: readFormField(formData.get("cf-turnstile-response")),
|
||||
};
|
||||
};
|
||||
|
||||
const handlePost: PagesFunction<Env> = async ({ request, env }) => {
|
||||
const formData = await request.formData();
|
||||
const name = readFormField(formData.get("name"));
|
||||
const email = readFormField(formData.get("email"));
|
||||
const message = readFormField(formData.get("message"));
|
||||
const turnstileToken = readFormField(formData.get("cf-turnstile-response"));
|
||||
const { name, email, message, turnstileToken } =
|
||||
await parseFormFields(request);
|
||||
|
||||
if (!name || !email || !message) {
|
||||
return jsonResponse(
|
||||
|
|
|
|||
|
|
@ -14,9 +14,19 @@
|
|||
message.textContent = "";
|
||||
|
||||
try {
|
||||
const formData = new FormData(form);
|
||||
const body = new URLSearchParams();
|
||||
for (const [key, value] of formData.entries()) {
|
||||
if (typeof value === "string") {
|
||||
body.append(key, value);
|
||||
}
|
||||
}
|
||||
const response = await fetch(form.action, {
|
||||
method: "POST",
|
||||
body: new FormData(form),
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
},
|
||||
body,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
|
|
@ -39,7 +49,10 @@
|
|||
|
||||
message.textContent = "Thanks! Your message has been sent.";
|
||||
form.reset();
|
||||
if (window.turnstile && typeof window.turnstile.reset === "function") {
|
||||
if (
|
||||
window.turnstile &&
|
||||
typeof window.turnstile.reset === "function"
|
||||
) {
|
||||
window.turnstile.reset();
|
||||
}
|
||||
} catch (error) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue