cannot upload images to my local public folder using multer in Next.js

[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. what am I missing?

"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"
  }