Skip to content

How to upload files in a Next.js form

New Course Coming Soon:

Get Really Good at Git

I had a form in a Next.js page:

<form method="post" action="/api/new" enctype="multipart/form-data">...</form>

which called an API endpoint.

Inside this form I had a file input control:

<input name="logo" type="file" />

Now in the API route, I wasn’t able to get this file.

I searched a bit and turns out Next.js by default does not allow it. I tried various solutions because some didn’t play well with uploading files AND having sending multiple checkboxes for the same attribute. With some solutions I got the file, but the rest of the form didn’t work as expected.

I had to install 2 packages:

npm install next-connect multiparty

I created a middleware folder in the Next.js project root, and inside it this file:


import nextConnect from 'next-connect'
import multiparty from 'multiparty'

const middleware = nextConnect()

middleware.use(async (req, res, next) => {
  const form = new multiparty.Form()

  await form.parse(req, function (err, fields, files) {
    req.body = fields
    req.files = files

export default middleware

Then I changed the API route from the usual structure:

export default async function handler(req, res) {


import middleware from 'middleware/middleware'
import nextConnect from 'next-connect'

const handler = nextConnect()
handler.use(middleware) (req, res) => {


export const config = {
  api: {
    bodyParser: false

export default handler

I restarted Next.js and I was able to get my files data in the API route.

Are you intimidated by Git? Can’t figure out merge vs rebase? Are you afraid of screwing up something any time you have to do something in Git? Do you rely on ChatGPT or random people’s answer on StackOverflow to fix your problems? Your coworkers are tired of explaining Git to you all the time? Git is something we all need to use, but few of us really master it. I created this course to improve your Git (and GitHub) knowledge at a radical level. A course that helps you feel less frustrated with Git. Launching May 21, 2024. Join the waiting list!

Here is how can I help you: