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.

Lessons in this unit:

0:	Introduction
1:	Using the router to detect the active link in Next.js
2:	Next.js Email Authentication using NextAuth
3:	Next.js embed youtube video - next
4:	How to force a page refresh in Next.js
5:	How to add Google Analytics 4 to Next.js
6:	Next.js, how to open a link in a new window
7:	How to parse Markdown in Next.js
8:	How to add ReCaptcha to a Next.js form
9:	▶︎ How to upload files in a Next.js form