nextjs protocol_error ai_generated true

Error: Server Actions require the request body to be parsed as FormData or JSON. Received unexpected content type: multipart/form-data

ID: nextjs/server-action-formdata-multipart

Also available as: JSON · Markdown · 中文

85%Fix Rate

84%Confidence

1Evidence

2024-01-20First Seen

Version Compatibility

Version	Status	Introduced	Deprecated	Notes
Next.js 14.0.0	active	—	—	—
Next.js 14.1.0	active	—	—	—
Next.js 14.2.0	active	—	—	—

Root Cause

A Server Action is called with a multipart/form-data request (e.g., from a file upload form without proper encoding), but Server Actions only support application/x-www-form-urlencoded, text/plain, or application/json content types. multipart/form-data is not supported.

generic

中文

服务器操作被调用时使用了 multipart/form-data 请求（例如，来自没有正确编码的文件上传表单），但服务器操作仅支持 application/x-www-form-urlencoded、text/plain 或 application/json 内容类型。不支持 multipart/form-data。

Official Documentation

https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions#formdata

Workarounds

90% success Remove the file input from the form and handle file uploads separately via an API route. Example: Use a standard form with action={serverAction} for text fields only, and add a separate file upload component that posts to /api/upload.
```
Remove the file input from the form and handle file uploads separately via an API route. Example: Use a standard form with action={serverAction} for text fields only, and add a separate file upload component that posts to /api/upload.
```
85% success Convert the form data to JSON in a client-side handler before calling the Server Action. Example: `const formData = new FormData(event.target); const json = Object.fromEntries(formData.entries()); await serverAction(json);`
```
Convert the form data to JSON in a client-side handler before calling the Server Action. Example: `const formData = new FormData(event.target); const json = Object.fromEntries(formData.entries()); await serverAction(json);`
```
80% success Use a third-party library like 'formidable' in an API route to handle multipart uploads, then call the Server Action from the API route with the parsed data as JSON.
```
Use a third-party library like 'formidable' in an API route to handle multipart uploads, then call the Server Action from the API route with the parsed data as JSON.
```

中文步骤

从表单中移除文件输入，并通过 API 路由单独处理文件上传。示例：仅对文本字段使用带有 action={serverAction} 的标准表单，并添加单独的文件上传组件，该组件向 /api/upload 发送 POST 请求。

在调用服务器操作之前，在客户端处理程序中将表单数据转换为 JSON。示例：`const formData = new FormData(event.target); const json = Object.fromEntries(formData.entries()); await serverAction(json);`

在 API 路由中使用第三方库（如 'formidable'）处理 multipart 上传，然后从 API 路由中使用解析后的数据以 JSON 格式调用服务器操作。

Dead Ends

Common approaches that don't work:

100% fail
Multipart/form-data is the default for forms with file inputs, but Server Actions reject it; the form must be sent as URL-encoded or plain text.
90% fail
If the fetch still sends multipart/form-data (the default for FormData), the same error occurs. The fetch must explicitly set Content-Type to application/json.
100% fail
HTML forms do not support JSON enctype; the browser will ignore it and use the default (application/x-www-form-urlencoded for non-file forms, multipart/form-data for file forms).