Next.js: Error 413 Request Entity Too Large on file upload

Question

I'm having troubles trying to upload large files with Next.js. I've created an onChange function on my input file, here's the code:

const handleFileUpload = () => new Promise(async (resolve) => {
    if(ref.current?.files){
        const formData = new FormData()
        Object.entries(ref.current.files).map(([i, f]) => {
            return formData.append(`${id}_${i}`, f)
        })

        const config = {
            headers: { 'content-type': 'multipart/form-data' },
            onUploadProgress: (event) => {
                const p = Math.round((event.loaded * 100) / event.total);
                setProgress(p)
            }
        }

        try{
            const response = await axios.post('/api/upload-file', formData, config);
            resolve(response)
        }
        catch(err){
            console.log(err)
        }
   }
}

And this is my /api/upload-file.js

import nextConnect from 'next-connect';
import multer from 'multer';
import { METHOD_NOT_ALLOWED, NOT_IMPLEMENTED, OK } from '../../utils/statusCode';

const upload = multer({

    storage: multer.diskStorage({
        destination: './public/upload',
        filename: (req, file, cb) => cb(null, file.originalname),
    })

})

const apiRoute = nextConnect({

    onError(error, req, res){
        res.status(NOT_IMPLEMENTED).json({error: `Errore: impossibile procedere. ${error.message}`})
    },
    onNoMatch(req, res){
        res.status(METHOD_NOT_ALLOWED).json({error: `Metodo ${req.method} non permesso`})
    }

})

apiRoute.use(upload.any())
apiRoute.post((req, res) => res.status(OK).json({data: 'success'}))

export default apiRoute

export const config = {
    api: {
        bodyParser: false
    }
}

It works perfectly with small files, but I receive a 413 error with larger ones (even 1 or 2MB), is there something I'm missing here?

I'm using Next.js 12.0.3

Yilmaz · Accepted Answer · 2022-12-04 20:02:39Z

5

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

Add this to the api route that you are uploading files to and it will fix the problem.

edited Dec 4, 2022 at 20:02

Yilmaz

51k19 gold badges226 silver badges279 bronze badges

answered Nov 6, 2022 at 19:06

T.J

591 silver badge3 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Aaron Meese Over a year ago

I recommend refraining from using code snippets when running them does not introduce any utility to the answer, such as when there is no console logs and no visible elements.

Hùng Trần · Accepted Answer · 2024-08-02 11:35:59Z

2

In my case, it was the nginx configuration that cause the blocking (1MB body size in default).

Adding this one line of code in my nginx website config fix the problems.

 Server{ 

    client_max_body_size 200M;
    *...my website configs*

  }

For more details: https://nginx.org/en/docs/http/ngx_http_core_module.html#client_max_body_size

answered Aug 2, 2024 at 11:35

Hùng Trần

211 bronze badge

Comments

Gorav Singal · Accepted Answer · 2022-01-15 17:28:47Z

1

I struggled with this error for almost two days. And, I solved it finally. During file upload, server requires a boundary where your file-data ends.

The trick is to use a "unique boundary" marker

The code should be used is:

await axios.post(
    url,
    filedataObj,
    {
        headers: {
            ...fileToUpload.getHeaders(),
            //some other headers
        },
    }
);

See https://www.gyanblog.com/javascript/next-js-solving-request-entity-too-large-issue-413/

answered Jan 15, 2022 at 17:28

Gorav Singal

5383 silver badges12 bronze badges

Comments

danielassayag · Accepted Answer · 2024-01-23 02:03:40Z

0

By default, the maximum size of the request body sent to a Server Action is 1MB, to prevent the consumption of excessive server resources in parsing large amounts of data, as well as potential DDoS attacks.

However, you can configure this limit using the serverActions.bodySizeLimit option. It can take the number of bytes or any string format supported by bytes, for example 1000, '500kb' or '3mb'.

// next.config.js

/** @type {import('next').NextConfig} */
 
module.exports = {
  experimental: {
    serverActions: {
      bodySizeLimit: '2mb',
    },
  },
}

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

answered Jan 23, 2024 at 2:03

danielassayag

1,0101 gold badge13 silver badges25 bronze badges

1 Comment

Redskinsjo Over a year ago

thank you but even with this added, it throws error 413. I'm using graphql-yoga and next, and i set the bodySizeLimit to '100mb', tried also 100000000

Collectives™ on Stack Overflow

Next.js: Error 413 Request Entity Too Large on file upload

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related