Cannot upload images with 'multer' and 'next-connect' using 'App Router'

[tsuccar]

The code below does not upload files to my "public/uploads" folder. The objective is to receive an array of files and store them locally with metadata saved in db. The client side sends form data with formdata appended as below. This used to work in
'page router' setup.

"app/api/posts/route.js :"

import { createEdgeRouter } from 'next-connect';
import { NextResponse } from 'next/server';
import multer from 'multer';
import db from '../../../utils/db';
import Product from '../../../models/Product';

const router = createEdgeRouter();
// Set The Storage Engine
const storage = multer.diskStorage({
  destination: './public/uploads',
  filename: function (req, file, cb) {
    console.log('inside multer storage callback', file);
    cb(
      null,

      file.fieldname + '-' + Date.now() + path.extname(file.originalname)
    );
  },
});
// Init Upload
const upload = multer({
  storage: storage,
  limits: { fileSize: 700000 }, //700K filesize
  fileFilter: function (req, file, cb) {
    checkFileType(file, cb);
  },
});

// Check File Type
function checkFileType(file, cb) {
  console.log('Inside checkFileType', file);
  // Allowed ext
  const filetypes = /jpeg|jpg|png|gif|webp|svg/;
  // Check ext
  const extname = filetypes.test(path.extname(file.originalname).toLowerCase());
  // Check mime
  const mimetype = filetypes.test(file.mimetype);

  if (mimetype && extname) {
    return cb(null, true);
  } else {
    cb('Error: Images Only!');
  }
}
//"images" is formdata.append name from client side.
router.post(upload.array('images'), async (req) => {
  const form = await req.formData();

  try {
    const files = form.get('images');
    const fileLocation = files.map((file) => `/uploads/${file.filename}`);
    // create an array of local file destination to be saved in DB along with Metadata
    const productMetaData = {
      country: form.get('country'),
      state: form.get('state'),
      city: form.get('city'),
      imagelocation: fileLocation,
    };

    await db.connect();
    const product = new Product(productMetaData);
    await product.save();
    return NextResponse.json({ message: 'Product created successfully' });
  } catch (e) {
    const res = NextResponse.json({ error: e.message }, { status: 500 });
    return res;
  }
})

export async function POST(req) {
  return router.run(req);
}

export const config = {
  api: {
    externalResolver: true, 
    bodyParser: false, 
// Disallow body parsing, consume as stream; also for multer to do the parsing for dataForm
  },
};

The client side :

const onSubmit = async () => {
    const formData = new FormData();
    if (productImage.files.length > 0) {
      productImage.files.forEach((file) => {
        formData.append('images', file, file.name); 
      });
    }
    formData.append('country', data.location.country);
    formData.append('state', data.location.state);
    formData.append('city', data.location.city);

    const res = await fetch('/api/posts', {
        method: 'POST',
        body: formData,
      });
    }

"package.json :"

  "dependencies": {
    "@emotion/react": "^11.11.0",
    "@emotion/styled": "^11.11.0",
    "@headlessui/react": "^1.7.15",
    "@heroicons/react": "^2.0.18",
    "@mui/icons-material": "^5.11.16",
    "@mui/material": "^5.13.3",
    "@paypal/react-paypal-js": "^7.8.3",
    "autoprefixer": "10.4.14",
    "axios": "^1.4.0",
    "bcryptjs": "^2.4.3",
    "cors": "^2.8.5",
    "js-cookie": "^3.0.5",
    "mongoose": "^7.2.2",
    "multer": "^1.4.5-lts.1",
    "next": "^13.4.4",
    "next-auth": "^4.22.1",
    "next-connect": "^1.0.0-next.4",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-confetti": "^6.1.0",
    "react-dom": "18.2.0",
    "react-dropzone": "^14.2.3",
    "react-hook-form": "^7.44.2",
    "react-toastify": "^9.1.3",
    "slugify": "^1.6.6",
    "sweetalert2": "^11.7.10",
    "tailwindcss": "3.3.2"
  }

[HimayunKhan]

import dbConnect from "@/app/backend/config/dbConnect";
import { updateProfile } from "@/app/backend/controllers/authControllers";
import createErrorResponse from "@/app/backend/middlewares/errors";
import User from "@/app/backend/models/user";
import { uploads } from "@/app/backend/utils/cloudinary";
import upload from "@/app/backend/utils/multer";
import { createRouter } from "next-connect";
import { authOptions } from "@/app/api/auth/[...nextauth]/route";
import { getServerSession } from "next-auth";
import { NextResponse } from "next/server";
import fs from "fs";

const router = createRouter();
export const config = {
api: {
bodyParser: false,
},
};

dbConnect();

const uploadMiddleware = upload.array("image");
router.use(uploadMiddleware).put(async (req, res) => {
try {
const session = await getServerSession(authOptions);
const userID = session?.user?.id;

const formData = await req.formData();
const newUserData = {
  name: formData.get("name"),
  email: formData.get("email"),
};

console.log("himaaaaaaaaaaa", newUserData.name, newUserData.email);

if (formData.has("image")) {
  const file = formData.get("image");

  const { name, path } = file;


  console.log("himaaaaaaaaaaaaa",file)
  console.log("himaaaaaaaaaaaaa",path)
  const uploader = async (path) => await uploads(path, "buyitnow/avatars");

  const avatarResponse = await uploader(path);
  fs.unlinkSync(path);
  newUserData.avatar = avatarResponse;
}



const user = await User.findByIdAndUpdate(userID, newUserData);

return NextResponse.json(user);

} catch (error) {
return createErrorResponse(error);
}
});

export async function PUT(request, ctx) {
return router.run(request, ctx);
}

i am also not able to get the path from the file it is showing an error {"success":false,"error":{"statusCode":500,"message":"The "path" argument must be of type string or an instance of Buffer or URL. Received undefined","stack":"TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined\n at Object.unlinkSync (node:fs:1805:10)\n at Array.eval (webpack-internal:///(sc_server)/./app/api/auth/me/route.js:55:55)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:249:37)"},"message":"Internal Server Error","stack":"TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string or an instance of Buffer or URL. Received undefined\n at Object.unlinkSync (node:fs:1805:10)\n at Array.eval (webpack-internal:///(sc_server)/./app/api/auth/me/route.js:55:55)\n at process.processTicksAndRejections (node:internal/process/task_queues:95:5)\n at async eval (webpack-internal:///(sc_server)/./node_modules/next/dist/server/future/route-modules/app-route/module.js:249:37)"}

[quebesinmars]

how to set limits (e.i max file size) to the formData method ?

[Tommy1223454]

In App Router I’d avoid forcing the old multer + next-connect pattern unless you really need that exact middleware stack.

For the transport part, await req.formData() is usually the simpler primitive.

Then I’d keep a separate server-side inspection step before the file is stored or forwarded anywhere. Getting a File in a route handler is not the same as trusting it.

I built an OSS package for that inspection step in Node.js:
https://github.com/pompelmi/pompelmi

Minimal shape:

import { NextResponse } from 'next/server'
import { scanBytes, STRICT_PUBLIC_UPLOAD } from 'pompelmi'

export const runtime = 'nodejs'

export async function POST(req: Request) {
  const form = await req.formData()
  const file = form.get('file')

  if (!(file instanceof File)) {
    return NextResponse.json({ error: 'Missing file' }, { status: 400 })
  }

  const bytes = Buffer.from(await file.arrayBuffer())

  const report = await scanBytes(bytes, {
    filename: file.name,
    mimeType: file.type,
    policy: STRICT_PUBLIC_UPLOAD,
    failClosed: true,
  })

  if (report.verdict !== 'clean') {
    return NextResponse.json({ error: 'Rejected upload', report }, { status: 400 })
  }

  // only now persist or forward the file
  return NextResponse.json({ ok: true, verdict: report.verdict })
}