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.
I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025