Skip to content

How to upload files in a Next.js form

New Courses Coming Soon

Join the waiting lists

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.

Here is how can I help you: