Can't submit form-data

Support
1

I have NextJs app that is hosted on netlify,

On my website i have a form that uses multipart to send text with files

This multi-part data is going to nextjs api and then to my backend, so in the end it looks like so

client → nextjs api route → backend api route

When i’m sending form without files or with files that are less than 4 mb everything works as expected,
but when i’m trying to send files that are larger than 4mb, it suddenly fails with following errors

SyntaxError: Unexpected token '<', "<HTML>
<HE"... is not valid JSON

if i go to network and look there, then it says “Sever closed connection”

or

SyntaxError: Unexpected end of JSON input

Which has empty response on network tab

What am i doing wrong? i’ve heard about 4mb limit in nextjs, but i’ve changed it like so

export const config = {
  api: {
    bodyParser: false,
    responseLimit: false,
  },
};

And also one important note, if i build my app and start it locally, everything works as expected and i’m able to send files larger than 4 mb

2

Hi @isnas, welcome and thanks for the post.

Note that Netlify forms does have limitations. Kindly check the Neflify documentation link below for more information about limitations.

You can also check the Netlify blog link below on how to properly add Netlify forms to your Next.js site.

Thanks.

3

If i understand correctly this only applies to forms that use data-netlify=true which i don’t use, i have a regular form that sends data to NextJS backend api which then gets redirected to my backend

4

Hi, @isnas. The Next.js API route is using Netlify Functions which are in turn using AWS Lambda.

Lambda itself has a limit on POST size as documented here:

There it says this:

Invocation payload (request and response) 6 MB each for request and response (synchronous)

The files are also likely being base64 encoded by the browser before being sent which also makes them larger. This is why a file smaller than 6 MB is hitting the limit (because it is over 6 MB after the base64 encoding).

This is my best guess as to why the large file uploads are failing.

The primary solution for this is to not use AWS Lambda for the form. If Lambda is used, this limitation will always exist.

2 Likes
5

Thanks, i knew something was not working on netlify side or i was hitting the limit, but wasn’t able to find what exactly it was, now it all makes sense, so i guess if i want to handle uploads up to 20MB i have to use my backend route directly from client and there is no other way for this to work?

6

Hi @isnas , sorry to say there isn’t a way to upload up to 20MB using form submissions as Luke mentioned, the Next.js API route is using Netlify Functions which are in turn using AWS Lambda which has the 6MB limitation.

2 Likes