How to upload files in a Next.js form

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:

middleware/middleware.js

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
    next()
  })
})

export default middleware

Then I changed the API route from the usual structure:

export default async function handler(req, res) {
  //...
}

to:

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

const handler = nextConnect()
handler.use(middleware)

handler.post(async (req, res) => {
  console.log(req.body)
  console.log(req.files)

  //...
})

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.