"body exceeded 1mb limit" in nextjs api routes

[thatanjan]

What version of Next.js are you using?

11.0.1

What version of Node.js are you using?

v16.5.0

What browser are you using?

Brave

What operating system are you using?

Arch Linux

How are you deploying your application?

next

Describe the Bug

I am trying to build a react image uploader application with nextjs api routes.

The /api/upload api file:

import cloudinary from 'cloudinary'

export const uploadDir = 'cules-uploader/'

const handler = async ({ body, method }, res) => {
    try {
        if (method !== 'POST')
            return res.status(400).json({ message: 'Invalid method' })

        const cloudinaryV2 = cloudinary.v2

        cloudinaryV2.config({
            cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
            api_key: process.env.CLOUDINARY_API_KEY,
            api_secret: process.env.CLOUDINARY_API_SECRET,
        })

        const { src } = body

        const imageConfig = {
            width: 1920,
            height: 1080,
            crop: 'fit',
            quality: 80,
            folder: uploadDir,
        }

        const { public_id } = await cloudinaryV2.uploader.upload(src, imageConfig)

        return res.json({ success: true, public_id })
    } catch (e) {
        return res.status(400).send({ message: 'Error processing request' })
    }
}

export default handler

I try to send a request from my client side code with axios:

const handleUpload = async () => {
      const { data } = await axios.post('/api/upload', {
        src: base64File,
    })
  }

It works fine if the file size is less than 1mb. But if file is more than 1mb, I get 413 error.

I also extend the body parser size limit on next.config.js file.

module.exports = {
    reactStrictMode: true,
    api: {
        bodyParser: {
            sizeLimit: '50mb',
        },
    },
}

But I still get 413 error. If I send a request with postman, then it works.

Expected Behavior

When I want to send request body more than 1mb, I don't want to get the following 413 error.

To Reproduce

/api/upload file:

import cloudinary from 'cloudinary'

export const uploadDir = 'cules-uploader/'

const handler = async ({ body, method }, res) => {
    try {
        if (method !== 'POST')
            return res.status(400).json({ message: 'Invalid method' })

        const cloudinaryV2 = cloudinary.v2

        cloudinaryV2.config({
            cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
            api_key: process.env.CLOUDINARY_API_KEY,
            api_secret: process.env.CLOUDINARY_API_SECRET,
        })

        const { src } = body

        const imageConfig = {
            width: 1920,
            height: 1080,
            crop: 'fit',
            quality: 80,
            folder: uploadDir,
        }

        const { public_id } = await cloudinaryV2.uploader.upload(src, imageConfig)

        return res.json({ success: true, public_id })
    } catch (e) {
        return res.status(400).send({ message: 'Error processing request' })
    }
}

export default handler

Client side code:

const handleUpload = async () => {
      const { data } = await axios.post('/api/upload', {
        src: base64File,
    })
  }

[timneutkens]

Duplicate of https://github.com/vercel/next.js/issues/19684#issuecomment-735897241

[jose-donato]

@thatanjan the config snippet should be added in the API function file, not in next.config.js

[Soujiro17]

Who can explain me how can i add the config? I loaded the config file in the API function file, but doesn't work. What more i need to do?

[Veshal-Maniam]

Who can explain me how can i add the config? I loaded the config file in the API function file, but doesn't work. What more i need to do?

Paste the following code before the handler function.

export const config = { api: { bodyParser: { sizeLimit: '25mb' // Set desired value here } } }

[mahdisoultana]

thank you very much it's solve the problem thank's a lot

[balazsorban44]

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.