Skip to content

formData with app router: Upload error: TypeError: Failed to parse body as FormData. #73220

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
539hex opened this issue Nov 26, 2024 · 9 comments
Open

formData with app router: Upload error: TypeError: Failed to parse body as FormData. #73220

539hex opened this issue Nov 26, 2024 · 9 comments
Labels
bug Issue was opened via the bug report template.

Comments

@539hex
Copy link

539hex commented Nov 26, 2024

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/twilight-flower-v6pl9s

To Reproduce

i am uploading a file using axios in a client side component in this way:

        const options: AxiosRequestConfig = {
        headers: { 'Content-Type': 'multipart/form-data' }
      };

      const { data } = await axios.post<{ success: boolean; }>(
        '/api/upload',
        formData,
        options
      );

in the /api/upload route i have the following code:

export async function POST(request: NextRequest) {
  try {
    console.log('in post');
    let formData = await request.formData();
    console.log('formData', formData);
    const file = formData.get('file') as File;
  } catch (error) {
    console.error('Upload error:', error);
    return NextResponse.json(
      { error: 'Failed to upload file' },
      { status: 500 }
    );
  }
}

if the file is <~2GB everythings is working, the formData is returned with the correct values, otherwise if the file is bigger i get the following output:

Upload error: TypeError: Failed to parse body as FormData.
    at node:internal/deps/undici/undici:5668:27
    at successSteps (node:internal/deps/undici/undici:5712:27)
    at fullyReadBody (node:internal/deps/undici/undici:4609:9)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5)
    at async consumeBody (node:internal/deps/undici/undici:5721:7)
    at async POST (/Users/539hex/dev/deft.cx/.next/server/chunks/_bc0f62._.js:282:24)
    at async /Users/539hex/dev/deft.cx/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:55831
    at async eO.execute (/Users/539hex/dev/deft.cx/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:46527)
    at async eO.handle (/Users/539hex/dev/deft.cx/node_modules/next/dist/compiled/next-server/app-route.runtime.dev.js:6:57165)
    at async doRender (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:1353:42)
    at async cacheEntry.responseCache.get.routeKind (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:1575:28)
    at async DevServer.renderToResponseWithComponentsImpl (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:1483:28)
    at async DevServer.renderPageComponent (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:1911:24)
    at async DevServer.renderToResponseImpl (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:1949:32)
    at async DevServer.pipeImpl (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:921:25)
    at async NextNodeServer.handleCatchallRenderRequest (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/next-server.js:272:17)
    at async DevServer.handleRequestImpl (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/base-server.js:817:17)
    at async /Users/539hex/dev/deft.cx/node_modules/next/dist/server/dev/next-dev-server.js:339:20
    at async Span.traceAsyncFn (/Users/539hex/dev/deft.cx/node_modules/next/dist/trace/trace.js:154:20)
    at async DevServer.handleRequest (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
    at async invokeRender (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/lib/router-server.js:173:21)
    at async handleRequest (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/lib/router-server.js:350:24)
    at async requestHandlerImpl (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/lib/router-server.js:374:13)
    at async Server.requestListener (/Users/539hex/dev/deft.cx/node_modules/next/dist/server/lib/start-server.js:141:13)
 POST /api/upload 500 in 9203ms

Current vs. Expected behavior

I expect always to have the formData returned despite the file size

Provide environment information

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 24.1.0: Thu Oct 10 21:03:11 PDT 2024; root:xnu-11215.41.3~2/RELEASE_ARM64_T6020
  Available memory (MB): 32768
  Available CPU cores: 12
Binaries:
  Node: 23.3.0
  npm: 10.9.0
  Yarn: 1.22.22
  pnpm: 9.12.1
Relevant Packages:
  next: 14.2.18 // An outdated version detected (latest is 15.0.3), upgrade is highly recommended!
  eslint-config-next: N/A
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.6.2
Next.js Config:
  output: N/A
 ⚠ An outdated version detected (latest is 15.0.3), upgrade is highly recommended!
   Please try the latest canary version (`npm install next@canary`) to confirm the issue still exists before creating a new issue.
   Read more - https://nextjs.org/docs/messages/opening-an-issue

Which area(s) are affected? (Select all that apply)

Not sure

Which stage(s) are affected? (Select all that apply)

next dev (local)

Additional context

i tried also to update to next 15.0.3 and i have the same exact issue.
@539hex 539hex added the bug Issue was opened via the bug report template. label Nov 26, 2024
@icyJoseph
Copy link
Contributor

Possibly related? nodejs/undici#3676

@539hex
Copy link
Author

539hex commented Nov 26, 2024

Yes it might be related

@icyJoseph
Copy link
Contributor

Are you able to downgrade Node.js to the 18-20 range, and test?

@539hex
Copy link
Author

539hex commented Nov 27, 2024

@icyJoseph i just tested with Node 18.20.5 and things are getting even stranger.

If i upload a file <2GB everythings is working as before, if the file is >2GB for example 2.65GB i am not getting any exception but the process will stuck right after the let formData = await request.formData(); and will hang forever without any message.
If the file is even bigger (4.32GB) i get the following output

in post
Upload error: RangeError: offset is out of bounds
    at Buffer.set (<anonymous>)
    at BufferList.concat (node:internal/streams/buffer_list:72:7)
    at fromList (node:internal/streams/readable:1373:26)
    at Readable.read (node:internal/streams/readable:553:11)
    at createAsyncIterator (node:internal/streams/readable:1163:54)
    at createAsyncIterator.next (<anonymous>)
    at Object.pull (node:internal/deps/undici/undici:792:52)
    at ensureIsPromise (node:internal/webstreams/util:192:19)
    at readableStreamDefaultControllerCallPullIfNeeded (node:internal/webstreams/readablestream:2250:5)
    at node:internal/webstreams/readablestream:2341:7
 POST /api/upload 500 in 721ms

@icyJoseph
Copy link
Contributor

Before I dive into this further, does it happen with simple fetch?

I suspect there's some Buffer allocation going on, https://stackoverflow.com/a/8974841, but it is just an early guess...

@539hex
Copy link
Author

539hex commented Nov 27, 2024 •
edited
Loading

Same issue using native fetch.

Looks like the new node release ( 23.3.0 ) increased the buffer to 8192 TB, the 18.20.5 got it capped at 4 GB.

Still the issue is present in both versions.

➜  ~ node
Welcome to Node.js v23.3.0.
Type ".help" for more information.
> (require('buffer').constants.MAX_LENGTH + 1) / 2**30
8388608
>


➜  ~ node
Welcome to Node.js v18.20.5.
Type ".help" for more information.
> (require('buffer').constants.MAX_LENGTH + 1) / 2**30
4.000000000931323
>

@539hex

This comment has been minimized.

Sign in to view
@Mohamed-kassim
Copy link

I am experiencing the same issue with our React Native project. I have already tried running it with a normal Bun server, and React Native is working fine. Additionally, I have tested with different Node versions (v20.13.1 and v22.2.0), but the issue persists.

Interestingly, the functionality works fine when tested with Insomnia.
Are there any logs or debugging steps I can help with?
@icyJoseph

@539hex
Copy link
Author

539hex commented May 15, 2025

Update as of Node 24.0.2 - still the same issue

Unhandled error in POST /upload: [TypeError: Failed to parse body as FormData.] { [cause]: [TypeError: expected CRLF] }

some useful refs https://philna.sh/blog/2025/01/14/troubles-with-multipart-form-data-fetch-node-js/

@icyJoseph

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@icyJoseph @539hex @Mohamed-kassim