how can I use multer with next.js API routes

[qbodk]

Hello everyone.
I'm trying to use multer in API routes as a middleware for file uploads.
Here is the code of my simple upload page (pages/upload.js) :

const Upload = () => (
  <form action="http://localhost:3000/api/upload" method="post" encType="multipart/form-data">
    <input type="file" name="avatar" />
    <button type="submit">submit</button>
  </form>
);

export default Upload;

and here is my applyMiddleware code for applying express middleware (util/applyMiddleware):

const applyMiddleware = (req, res, middleware) => {
  return new Promise((resolve, reject) => {
    middleware(req, res, (result) => {
      if (result instanceof Error) return reject(result);
      return resolve(result);
    });
  });
};

export default applyMiddleware;

and the last part of code is the API route itself (api/upload.js):

import Multer from "multer";

import applyMiddleware from "util/applyMiddleware";

const upload = Multer({ dest: "uploads/" }).single("avatar");

const handler = async (req, res) => {
  await applyMiddleware(req, res, upload);
  res.end(JSON.stringify({ data: { result: "file uploaded" } }));
};

export default handler;

the same method works in express but I've no idea why it doesn't work here.
I get no errors and even I get the response and uploads folder gets created but no file gets uploaded.
even if I try to create a custom multer disk storage:

const fileStorage = Multer.diskStorage({
  destination: (req, file, cb) => {
    console.log("storage");
    cb(null, "uploads");
  },
  filename: (req, file, cb) => {
    const fileName = file.originalname;
    console.log(fileName);
    cb(null, fileName);
  },
});

and specify it in upload middleware:

const upload = Multer({ storage: fileStorage }).single("avatar");

the console.log statements in destination and filename methods of multer diskStorage don't execute at all.

any help would be appreciated!

[qbodk]

I finally resolved it after hours of hard work and on the edge of disappointment when I went after using this solution for file uploads in Simple Nextjs File Upload — Backend API
the only problem was with next.js's default bodyParser.
so all I had to do was to add the following configuration lines to api/upload.js

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

Happily everything works fine now!

[hafabdulsami]

i have done it but now i ma getting
{
"success": false,
"message": "Method not allowed"
}
how can we resolved it

[Grimshinigami]

You can check out my findings if you want, I had the same issue, I got it working: https://dev.to/grimshinigami/how-to-handle-large-filefiles-streams-in-nextjs-13-using-busboymulter-25gb