Body Limit 1mb using Server Actions, Even though already set body parser

[smam-tech]

Summary

Next JS Version : 13.4.7
Example page that having problem : File in Github Link

Describe The Bug

--------------------------------------------

So i already read this discussion/Issue
#19684

I didnt use any Next.JS API I think? I just used Server Actions to handle the communication through Other Apps API. I have alrady tried to put below code everywhere, in next js config, in the file (top,bottom, everywhere) and it keep saying 1mb file limit whenever i want to upload image more than 1mb. It works if the image is less than 1mb.
export const config = { api: { bodyParser: { sizeLimit: "25mb" } } };

How to Reproduce

--------------------------------------------

1. npm install
2. npm run dev
3. go to localhost:3000/tes then input user administrator and password admin
4. go to localhost:3000/settings then upload image, click upload then click update
   
5. Error will happen, Data wont be pushed

Systems Information

Server :
OS : Ubuntu Server 22.04
Browser : Mozilla & Chrome
Local :
OS : Windows 11
Browser : Mozilla & Chrome

P.S. : This is my thesis project with my friend, I am actually a backend guy so i didn't really know much about the HTML and stuff, so i will tag my frontend guy @hfpland
It would be really helpfull if anyone can tell me where exactly should i put the body parser api config. Thanks!

Additional information

No response

Example

https://github.com/smam-tech/Knowledge-Management-Systems/blob/main/frontend/src/app/settings/page.js

[wwwdepot]

See

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

[smam-tech]

ah didnt see that documentation, I'll try it. Thanks

[smam-tech]

It worked thanks, one more thing though. I am somehow didnt able to log something like this again. Do you know how to show this on log?

[Jared-Dahlke]

that link is no longer available. what did yall do to increase size

[sujjeee]

same its not working tried both

/** @type {import('next').NextConfig} */
import("./src/env.js")

const nextConfig = {
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
  logging: {
    fetches: {
      fullUrl: true,
    },
  },
  serverActions: {
    bodySizeLimit: "5mb",
  },
  experimental: {
    serverActionsBodySizeLimit: "5mb",
  },
}

export default nextConfig

[sujjeee]

@BertVanHeckeCertifisc Were you able to figure it out? Neither work

experimental: {
    // serverActionsBodySizeLimit: '5mb',
    serverActions: {
      bodySizeLimit: '5mb',
    },
  },

@panthp got any fix?

[BertVanHeckeCertifisc]

@BertVanHeckeCertifisc Were you able to figure it out? Neither work

experimental: {
    // serverActionsBodySizeLimit: '5mb',
    serverActions: {
      bodySizeLimit: '5mb',
    },
  },

@panthp @sujjeee Unfortunately, no, I didn't find a direct solution. However, I discovered an alternative approach that might be useful. We encountered a similar issue when trying to upload files within our server action. To resolve this, I now handle the file upload before submitting the form that triggers the server action. Specifically, I upload the file using an API route in Next.js. I hope this helps!

[sujjeee]

Yeah it's good approach too!

What I'm doing now is just reducing image size before passing to server actions. May be in future will switch to /api for uploads.

[BertVanHeckeCertifisc]

Yeah it's good approach too!

What I'm doing now is just reducing image size before passing to server actions. May be in future will switch to /api for uploads.

Yes, that's also a good solution. In my case this was not really an options since we needed to handle up to 10 files, so reducing the size of all 10 images would still be too large. But I'm glad you found a solution for your use case.

[juancarloselorriaga]

I don't think the accepted answer is valid anymore. Any updates?

[2-fly-4-ai]

Yes this doesn't work. It's extremely frustrating, how ridiculous.

[25khattab]

I want to be able to do something like this

export const config = {
  api: {
    bodyParser: {
      sizeLimit: `${MAX_FILE_SIZE_IN_MB * 2 + 2}mb`,
    },
    responseLimit: false,
  },
}

but in the build I see this warning
Unsupported template literal with expressions at "config.api.bodyParser.sizeLimit". The default config will be used instead.

any ideas to maybe bypass this

[peters-finstreet]

Have a look at this documentation please. Depending on the Next.js version you are using this should work.
https://nextjs.org/docs/app/api-reference/config/next-config-js/serverActions#bodysizelimit

You could also check if there is a restriction on the body size on a different level, for example on the hosting provider's side.

[vikas-viki]

guys an api call /api/.... is not a server action, look after what server action is and then setting body size will work out.

[Tommy1223454]

If Server Actions body limits keep getting in the way, moving binary upload handling to a dedicated API route is probably the cleaner boundary anyway.

That also gives you a natural place to inspect the upload before storage instead of treating the raw file as trusted just because the request succeeded.

I built an OSS package for that Node.js step:
https://github.com/pompelmi/pompelmi

It’s basically an inspect-before-storage layer for untrusted uploads, which tends to fit better in an API/upload route than inside the rest of the form action flow.

[andrevenancio]

I wrote an article explaining the pattern your app will most likely have once you need to upload assets that are bigger than the 1Mb default body limit on server actions: https://medium.com/@venancio.andre/stop-sending-user-uploads-through-your-server-45df3d9a9b0e

I'm working on a image tool and at some point I went down this rabbit hole and decided to build an SDK so I dont have to deal with this in any other future project I have.