axios post request keeps on pending in browser (works fine in postman)

Question

I am trying to create a post request to send files to the server. I am using multer for file uploads and setting some file validations in the backend (only jpeg supported and less than 5mb). When I select an image file (even larger than the limit set on the backend) and send it, the request is sent and is further processed. But when I try to upload any other file format(like mp4 or pdf) the request stays on pending state and eventually fails without any error in response. I've written the below code :

// handleUploads.js
import multer from 'multer'
import { v4 as uuidv4 } from 'uuid';

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads/product_images/');
    },
    filename: function (req, file, cb) {
        cb(null, "product-" + Date.now() + '-' + uuidv4() + "-" + file.originalname);
    }
});

const upload = multer({
    storage: storage,
    limits: {
        fileSize: 1024 * 1024 * 5
    },
    fileFilter: function (req, file, cb) {
        if (file.mimetype == 'image/jpeg') {
            return cb(null, true)
        } else {
            return cb(new Error("Only JPEG Supported"), false);
        }
    }
}).array("images")
const handleUploads = (req, res, next) => {
    upload(req, res, (err) => {
        if (err) {
            console.log(err)
            return res.json({ error: 'Internal server error', message: err.message });
        }
        next();
    });
}

export { handleUploads };

// productRouter.js
import express from 'express'
import { createProduct } from '../controllers/productController.js';
import multer from 'multer'
import { v4 as uuidv4 } from 'uuid';
import { handleUploads } from '../utils/handleUploads.js';


const productRouter = express.Router();


productRouter
    .post('/', handleUploads, createProduct)

export default productRouter

// productController.js
export const createProduct = async (req, res) => {
    res.json({ recieved:true });
}

// calling the api
export function createProduct(data) {
    return new Promise(async (resolve) => {
        const url = 'http://localhost:8080/api/products/';
        const newProduct = new FormData();
        newProduct.append('name', data.name)
        newProduct.append('short_desc', data.short_desc)
        newProduct.append('description', data.description)
        newProduct.append('sizes', JSON.stringify(data.sizes))
        newProduct.append('description', data.description)
        newProduct.append('category', data.category)
        for (let i = 0; i < data.images.length; i++) {
            newProduct.append('images', data.images[i]);
        }

        let config = {
            method: 'post',
            withCredentials: true,
            maxBodyLength: Infinity,
            maxContentLength: Infinity,
            url: 'http://localhost:8080/api/products',
            headers: {
                "Content-Type": "multipart/form-data"
            },
            data: newProduct
        };

        const response = await axios.request(config);
        console.log(response)
        resolve({ data: { created: true } });
    })
}

I am confused because everything works fine in Postman. What is it that is different in browsers(or chrome). I've tried setting some headers like maxContentLength, maxBodyLength but nothing changes. Strange thing is that I am receiving the file details at the backend but its not able to send the response(only in the case of large files that are not image) and just stays pending