bug: Fields truncated when submitting form using Server Actions

packages/next/src/server/app-render/action-handler.ts

@@ -505,8 +505,15 @@ export async function handleAction({
 
         if (isMultipartAction) {
           if (isFetchAction) {
+            const readableLimit = serverActions?.bodySizeLimit ?? '1 MB'
+            const limit = require('next/dist/compiled/bytes').parse(
+              readableLimit
+            )
             const busboy = require('busboy')
-            const bb = busboy({ headers: req.headers })
+            const bb = busboy({
+              headers: req.headers,
+              limits: { fieldSize: limit },
+            })
             req.pipe(bb)
 
             bound = await decodeReplyFromBusboy(bb, serverModuleMap)

test/e2e/app-dir/actions/app-action-size-limit-invalid.test.ts

@@ -117,6 +117,42 @@ createNextDescribe(
             : ''
         }, 'yes')
       })
+
+      it('should respect the size set in serverActions.bodySizeLimit when submitting form', async function () {
+        await next.patchFile(
+          'next.config.js',
+          `
+      module.exports = {
+        experimental: {
+          serverActions: { bodySizeLimit: '2mb' }
+        },
+      }
+      `
+        )
+        await next.stop()
+        await next.build()
+        await next.start()
+
+        const logs: string[] = []
+        next.on('stdout', (log) => {
+          logs.push(log)
+        })
+        next.on('stderr', (log) => {
+          logs.push(log)
+        })
+
+        const browser = await next.browser('/form')
+        await browser.elementByCss('#size-1mb').click()
+
+        await check(() => {
+          return logs.some((log) => log.includes('size = 1048576')) ? 'yes' : ''
+        }, 'yes')
+
+        await browser.elementByCss('#size-2mb').click()
+        await check(() => {
+          return logs.some((log) => log.includes('size = 2097152')) ? 'yes' : ''
+        }, 'yes')
+      })
     }
   }
 )

test/e2e/app-dir/actions/app/form/page.js

@@ -0,0 +1,42 @@
+async function action(formData) {
+  'use server'
+  const payload = formData.get('payload').toString()
+  console.log('size =', payload.length)
+}
+
+export default function Page() {
+  return (
+    <>
+      <form action={action}>
+        <input
+          type="hidden"
+          name="payload"
+          value={'a'.repeat(1024 * 1024 * 1)}
+        />
+        <button type="submit" id="size-1mb">
+          SUBMIT 1mb
+        </button>
+      </form>
+      <form action={action}>
+        <input
+          type="hidden"
+          name="payload"
+          value={'a'.repeat(1024 * 1024 * 2)}
+        />
+        <button type="submit" id="size-2mb">
+          SUBMIT 2mb
+        </button>
+      </form>
+      <form action={action}>
+        <input
+          type="hidden"
+          name="payload"
+          value={'a'.repeat(1024 * 1024 * 3)}
+        />
+        <button type="submit" id="size-3mb">
+          SUBMIT 3mb
+        </button>
+      </form>
+    </>
+  )
+}