Multer doesn't return req.body and req.file using next-connect

Question

I'm using nextjs and I want to upload a file so I used next-connect in order to use multer

import nc from "next-connect";
import multer from "multer";

export const config = {
    api: {
      bodyParser: false,
    },
}

const upload = multer({ dest: `${__dirname}../../public` });

const handler = nc()
  .use(upload.single('image'))
  .post(async (req, res)=>{
    console.log(req.body); // undefined
    console.log(req.file); // undefined
    res.status(200).send("yo");
  })


export default handler;

this is the client side code :

function handleOnSubmit(e){
        e.preventDefault();

        const data = {};

        var formData = new FormData(e.target);
        for (const [name,value] of formData) {
            data[name] = value;
        }
        data.type = data.type[0].toUpperCase();
        data.name = data.name[0].toUpperCase();

        axios({
            method: "POST",
            url:"/api/manager",
            data,
            config: {
                headers: {
                    'content-type': 'multipart/form-data'
                }
            }
        })
        .then(res=>{
            console.log(res);
        })
        .catch(err=>{
            throw err
        });
    }
...
return(
   ...
   <Form onSubmit={(e)=>handleOnSubmit(e)}>
   ...
   </Form>
)

I searched and everything I found was related to nodejs and expressjs but nothing on next.js. I have no idea about how to proceed.

Hi @Eye Patch. Im using the same stack and can't get it working. Did you have the change to get this working? Heres my issue: https://stackoverflow.com/questions/70549078/nextjs-and-multer-file-upload-405-method-not-allowed-using-next-connect — Ilir, Jan 01 '22 at 14:35
@Ilir, It was a long time ago, but I think I gave up on multer and went with formidable. I don't know if that could solve your issue. — Eye Patch, Jan 02 '22 at 12:32
I tried Formidable also and couldn't make that work. But i fixed Multer last night. Thanks for the answer though! — Ilir, Jan 02 '22 at 12:40
For me the problem was simply that I needed to include `export const config = { api: { bodyParser: false }};` and accept the requests as streams. — Adam D, Jan 14 '22 at 15:19

score 9 · Answer 1 · answered Nov 15 '21 at 10:49

for those who are still looking for a solution on how to use multer as middleware with nextJs, here is an example of an API route, using multer has middleware. The route is calling a getSignedUrl function to upload file to bucket.

running nextJs v12 and multer 1.4.3

import multer from "multer";
import { NextApiRequest, NextApiResponse } from "next";
import { getSignedUrl } from "../../lib/uploadingToBucket";

function runMiddleware(
  req: NextApiRequest & { [key: string]: any },
  res: NextApiResponse,
  fn: (...args: any[]) => void
): Promise<any> {
  return new Promise((resolve, reject) => {
    fn(req, res, (result: any) => {
      if (result instanceof Error) {
        return reject(result);
      }

      return resolve(result);
    });
  });
}

export const config = {
  api: {
    bodyParser: false,
  },
};

const handler = async (
  req: NextApiRequest & { [key: string]: any },
  res: NextApiResponse
): Promise<void> => {
  //const multerStorage = multer.memoryStorage();
  const multerUpload = multer({ dest: "uploads/" });

  await runMiddleware(req, res, multerUpload.single("file"));
  const file = req.file;
  const others = req.body;
  const signedUrl = await getSignedUrl(others.bucketName, file.filename);
   res.status(200).json({ getSignedUrl: signedUrl });
};

export default handler;

Please help me for https://stackoverflow.com/questions/76278691/why-multer-not-save-file-on-server-nginx-next-js — XAZG Неизвестный, May 19 '23 at 08:50

score 7 · Answer 2 · answered Mar 03 '21 at 15:23

When I switched to the Next.js framework, I first tried to upload a file with the 'multer' library and preferred to give up and use 'formidable'. The reason was that there were a few resources available with Nextjs and multer.

And if I'm not wrong here, multer should be added as middleware, so this means rewriting the server.js page. You can review these topics:

Create custom server with Nextjs: https://nextjs.org/docs/advanced-features/custom-server
And adding middleware: https://nextjs.org/docs/api-routes/api-middlewares#connectexpress-middleware-support

If you don't want to deal with this, you can check out a simple gist on using this resource formidable library: https://gist.github.com/agmm/da47a027f3d73870020a5102388dd820

And this is the file upload script I created: https://github.com/fatiiates/rest-w-nextjs/blob/main/src/assets/lib/user/file/upload.ts

I tried what is in the documention and nothing worked. I'm going to try formidable. Thanks — Eye Patch, Mar 03 '21 at 16:46

score 4 · Answer 3 · answered Jun 08 '21 at 15:32

had the same problem. don't know if it's the same as yours but in case it might help someone .. when I shifted multer to use memory storage rather than desk storage it worked fine .. in my case i was using another middleware after multer to upload to aws s3 so I didn't need to have the file stored in the ./public permanently .. I just needed the req.file available in the next middleware. In your case try changing

const upload = multer({ dest: `${__dirname}../../public` });

to

const storage = multer.memoryStorage()
const upload = multer({storage: storage});

score 3 · Answer 4 · answered Aug 19 '22 at 10:49

It turned out that all you need is to disable NextJS built-in body parser for the specific API route (https://nextjs.org/docs/api-routes/api-middlewares#custom-config):

// The following should be exported from your API route file
export const config = {
  api: { bodyParser: false },
};

Multer doesn't return req.body and req.file using next-connect

4 Answers4