nextjs data_error ai_generated true

Error: Server Actions cannot receive ArrayBuffer or Blob directly from FormData. Use File objects or convert to base64.

ID: nextjs/server-action-formdata-arraybuffer

Also available as: JSON · Markdown · 中文
80%Fix Rate
82%Confidence
1Evidence
2025-01-10First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
Next.js 14.x active — — —
Next.js 15.x active — — —

Root Cause

A Server Action receives FormData containing ArrayBuffer or Blob entries, which are not directly serializable for server transmission. Next.js Server Actions only support File, string, or number types from FormData.

generic

中文

服务端操作接收到的 FormData 包含 ArrayBuffer 或 Blob 条目，这些类型无法直接序列化用于服务端传输。Next.js 服务端操作仅支持来自 FormData 的 File、string 或 number 类型。

Official Documentation

https://nextjs.org/docs/app/api-reference/functions/server-actions

Workarounds

  1. 80% success Convert ArrayBuffer to base64 on the client before appending to FormData. Example: const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); formData.append('file', base64); Then decode in the Server Action: const buffer = Buffer.from(base64, 'base64'); 
    Convert ArrayBuffer to base64 on the client before appending to FormData. Example: const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); formData.append('file', base64); Then decode in the Server Action: const buffer = Buffer.from(base64, 'base64');
  2. 85% success Wrap the ArrayBuffer in a File object before appending to FormData. Example: const file = new File([arrayBuffer], 'filename.bin'); formData.append('file', file); The Server Action will receive it as a File object. 
    Wrap the ArrayBuffer in a File object before appending to FormData. Example: const file = new File([arrayBuffer], 'filename.bin'); formData.append('file', file); The Server Action will receive it as a File object.
  3. 75% success Instead of using a Server Action, send the data via a fetch POST request to an API route that accepts binary data directly. 
    Instead of using a Server Action, send the data via a fetch POST request to an API route that accepts binary data directly.

中文步骤

  1. 在客户端将 ArrayBuffer 转换为 base64 再附加到 FormData。示例：const base64 = btoa(String.fromCharCode(...new Uint8Array(arrayBuffer))); formData.append('file', base64); 然后在服务端操作中解码：const buffer = Buffer.from(base64, 'base64');
  2. 在附加到 FormData 之前将 ArrayBuffer 包装在 File 对象中。示例：const file = new File([arrayBuffer], 'filename.bin'); formData.append('file', file); 服务端操作将接收到一个 File 对象。
  3. 不使用服务端操作，而是通过 fetch POST 请求将数据发送到直接接受二进制数据的 API 路由。

Dead Ends

Common approaches that don't work:

  1. 90% fail

    ArrayBuffer is binary data; JSON.parse will fail on it unless it is already a JSON string. This approach also does not address the serialization issue for the Server Action.

  2. 100% fail

    FormData serialization does not support ArrayBuffer; it will be converted to a string '[object ArrayBuffer]' or cause a TypeError during submission.

  3. 85% fail

    Next.js Server Actions handle FormData parsing internally before middleware runs. You cannot intercept the request body in middleware for Server Actions.