This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
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 3 packages:
npm install next-connect multipartyI 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
And I changed the API route from the usual:
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.
This content originally appeared on flaviocopes.com and was authored by flaviocopes.com
flaviocopes.com | Sciencx (2021-06-26T05:00:00+00:00) How to upload files in a Next.js form. Retrieved from https://www.scien.cx/2021/06/26/how-to-upload-files-in-a-next-js-form/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.