How to get file in request body in nextjs 13.2 route handler

Question

I was trying to send a post request to my api with formdata. However trying to access the request file in the route handler causes the error below:

export async function POST(req: NextApiRequest, res: NextApiResponse) {
    const data = req.files.file
    // const data = req.body
    console.log(data)
}

The function call api:

    const handleOnSubmit = () => {
        console.log('file', file)
        if (isLoading) return
        setIsLoading(true)
        const formData = new FormData();
        formData.append('file', file)
        axios.post('/api/text', formData)
            .then((res) => {
                console.log(res.data)
            })
            .catch((err) => {
                console.log(err)

            });
    }

devpolo · Answer 1 · 2023-03-15T16:47:48.070

0

You can do it with a simple config export and formidable:

import formidable from "formidable";

export const config = {
  api: {
    bodyParser: false, // enable form data 
  },
};

const formidableParse = async (req) =>
  new Promise((resolve, reject) =>
    new formidable.IncomingForm().parse(req, (err, fields, files) =>
      err ? reject(err) : resolve([fields, files])
    )
  );

export async function POST(req, res) {
  const [fields, files] = await formidableParse(req);
  console.log(files)
}

Edit

Sometimes, you will have to update formidable to latest v3 version.

You also must not forget to add the Content-Type header:

axios.post('/api/text', formData, {
  headers: {
    "Content-Type": "multipart/form-data",
  },
});

edited Mar 15 '23 at 16:47

answered Mar 15 '23 at 12:31

devpolo

2,487
3
12
28

when I use formidable, it has an error: - Error: Cannot find module 'xxxx\xxxx\plugins\octetstream.js' – john Mar 15 '23 at 12:38
What is your formidable version? – devpolo Mar 15 '23 at 14:09
"formidable": "^2.1.1", – john Mar 15 '23 at 15:25
Can you try with version 3: `npm i formidable@3.2.5` – devpolo Mar 15 '23 at 15:34
2

it has a new error for formidable@3.2.5 error - TypeError: .formidable__WEBPACK_IMPORTED_MODULE_1__.default.IncomingForm is not a constructor – john Mar 15 '23 at 15:45
Can this help you? https://stackoverflow.com/questions/50435253/webpack-imported-module-is-not-a-constructor – devpolo Mar 15 '23 at 15:47
How do you import `formidable` in your `POST` handler? – devpolo Mar 15 '23 at 15:48
yes, it fixed the issue, thx. But I also get the another error in IncomingForm. error - TypeError: req.on is not a function. Now I am trying to fix it. – john Mar 15 '23 at 15:56
but I still can't read the file with the error – john Mar 15 '23 at 16:19
Can you give more context of the err? – devpolo Mar 15 '23 at 16:21
error - TypeError: req.on is not a function at IncomingForm.parse (webpack-internal:///(sc_server)/./node_modules/formidable/src/Formidable.js:182:13) The error in here ``` new formidable.IncomingForm().parse(req, (err, fields, files) => err ? reject(err) : resolve([fields, files]) ) ``` – john Mar 15 '23 at 16:32
did you add `multipart/form-data` to your `axios.post`? – devpolo Mar 15 '23 at 16:46
yes, I added multipart/form-data in axios.post headers. But it has a same error – john Mar 15 '23 at 17:11
Did you fixed your error? – devpolo Mar 15 '23 at 22:53
not yet fix the error – john Mar 16 '23 at 14:15
Can you share your code? – devpolo Mar 16 '23 at 14:15

Robin Avila · Answer 2 · 2023-07-04T10:33:14.950

Correct import

import { IncomingForm, File } from 'formidable';<code>

Bad import

import formidable from 'formidable';

parse function

const parseFiles = async(req: NextApiRequest): Promise<string> => {

return new Promise( (resolve, reject) => {

    const form = new IncomingForm() ;
    form.parse( req, async( err, fields, files ) => {
        console.log({file: files.file});

        if ( err ) {
            return reject(err);
        }
//The files.file argument is an array
// Example use
        const filePath = await saveFile( files.file[0] as File )
        resolve(filePath);
    })

}) }

Versions formidable: 3.2.5 next: 13.4.6

How to get file in request body in nextjs 13.2 route handler

2 Answers2