[Server actions] Error: Body exceeded 1mb limit

[kasipavankumar]

Summary

I am using server actions for file uploads. When trying to upload a file bigger than 1MB, the following error is being raised by the Next server:

error Error: Body exceeded 1mb limit

I tried the old way of exporting config, which seem to be deprecated.

export const config = {
    api: {
        bodyParser: {
            sizeLimit: '8mb',
        },
    },
}

Is there a way I can increase the body size limit for server actions?

Additional information

No response

Example

No response

[happypoo35]

As of now I don't see any way to set body limit programmatically.

For testing purposes you can change limit value in node_modules\next\dist\server\app-render\action-handler.js

const actionData = await parseBody(req, "10mb") || ""; // Changed limit to 10mb

[praveenswadesh]

As per this line, Shouldn't this be

  config.api.bodyParser.sizeLimit

[itsjavi]

this has no effect. it seems hardcoded to '1mb' https://github.com/vercel/next.js/blob/canary/packages/next/src/server/app-render/action-handler.ts#L331

I hope we get a configurable option in next version

[devjiwonchoi]

This feature has been blocked since App Router. It is currently hard-coded to 1mb as you can see here.

You need to customize the parseBody() size manually through node_modules.. not recommended but no "quicker" option is available at this moment.

The file is located in node_modules\next\dist\server\app-render\action-handler.js.

I've opened PR #51104 to resolve this hard-coded size issue.

UPDATE

Resolved with #51104

Reference

• API Routes Response Size Limit
• Action Handler Set to 1mb

[itsjavi]

thank you! I was going to also open a PR but got no time :(

[devjiwonchoi]

@kasipavankumar serverActiionsBodySizeLimit has been added on release v13.4.8.

[PatrickTimas]

on your next.config.js

module.exports = {
  experimental: {
    serverActions: {
      allowedOrigins: ['my-proxy.com', '*.my-proxy.com'],
    },
  },
}

From: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions

[Marabii]

there's always a maximum amount of data that can uploaded using server actions, and if surpassed it throws an error to the console and there's no way to catch it and handle it gracefully. Correct me if i'm wrong. I tried this:

const handleSubmit = async (formData: FormData) => {
try {
formAction(formData);
} catch (e) {
alert("something went wrong");
}
};

i then pass handleSubmit as an action to the form but it doesn't work.

[geekysaurabh001]

As @Marabii said. No way to catch it. This gives Application Error in Production.

[roofleDev]

I spent an hour trying to catch this error but regardless of including the try/catch blocks client-side and server-side, I can't catch it. When my client component calls the server action it throws the uncaught error on the server and hangs until the timeout limit.

The server logs:

 uncaughtException:  [Error: Body exceeded 1 MB limit.
                To configure the body size limit for Server Actions, see: https://nextjs.org/docs/app/api-reference/next-config-js/serverActions#bodysizelimit] {
  statusCode: 413
}

I have increased my server action body size limit, but it is unfortunate this error can't seem to be caught and reported back to the frontend in a meaningful way. If I'm wrong and there is a way, please let us know. 

[jcamatta]

handleUploadFile = (e) => { file = e.target.files[0] if (file.size > MAX_LIMIT) { alert } }

[roofleDev]

Thanks @jcamatta, sometimes I can't see the forest through the trees. That's a nice solution.