Send multiple Files for frontend to backend with the help of multer

 send.js(frontend)

import React, { useState } from 'react';
import axios from 'axios';
const Registration = () => {
  const [imgData, setImgData] = useState();
  const inputEvent = (e) => {
    const name = e.target.name;
    const value = e.target.files[0];
    // console.log(value)
    setImgData((preV) => {
      return {
        ...preV,
        [name]: value
      }
    })
  }
  const btnClick = async (e) => {
    e.preventDefault()
    const { panCard, aadharCard } = imgData;
    const userData = new FormData();
    userData.append('panCard', panCard);
    userData.append('aadharCard', aadharCard);
    console.log(userData)
    const url = "/upload";
    // console.log(data)
    axios.post(url, userData)
      .then((res) => {
        console.log(res)
      }).catch((err) => {
        console.log(err)
      })
  }
  return (
    <>
      <div className="register container p-4 my-4 w-[40%] rounded-2xl border-2 shadow-sm">
        <form method='POST' className="row g-3">
          <div className="mb-3">
            <input className="form-control" type="file" onChange={inputEvent} name="panCard" id="formFile" />
          </div>
          <div className="mb-3">
            <input className="form-control" type="file" onChange={inputEvent} name="aadharCard" id="formFile" />
          </div>
          <div className="col-12 flex justify-center">
            <button onClick={btnClick} className="btn btn-primary px-4">SignUp</button>
          </div>
        </form>
      </div>
    </>
  )
}
export default Registration

registerSchema

const mongoose = require('mongoose');
const proprietorSchema = new mongoose.Schema({
    panCard : {
        data : Buffer,
        contentType: String
    },
    aadharCard : {
        data : Buffer,
        contentType: String
    },
    
})
const GstProprietor = mongoose.model('GST_Proprietor', proprietorSchema);
module.exports = GstProprietor;

register.js(backend)

const GstProprietor = require('../../../../../model/serviceSchema/taxation/GST/Registration/gstProprietorSchema')
const multer = require('multer')
const path = require('path')
const docStore = path.dirname('G:/legalapp-backend/controllers/client/clientServices/GST/docUpload/gstPropriator')
const Storage = multer.diskStorage({
    destination: docStore,
    filename: ((req, file, cb) => {
        cb(null, file.originalname)
    })
});
// const upload = multer().single('panCard');
const upload = multer({
    storage: Storage
}).fields([
    { name: 'panCard', maxCount: 1 },
    { name: 'aadharCard', maxCount: 1 },
  ])
const uploadDoc = async (req, res) => {
    try {
        // console.log(req)
        upload(req, res, (err) => {
            console.log(req.files)
            if (err) {
                console.log(err)
            } else {
                const userField = new GstProprietor({
                    panCard: {
                        data: req.files.panCard[0].filename,
                        contentType: "documents"
                    },
                    aadharCard: {
                        data: req.files.aadharCard[0].filename,
                        contentType: "documents"
                    }
                });
                const userRegister = userField.save();
                if (userRegister) {
                    return res.status(201).json("User Registered Successfully");
                } else {
                    return res.status(500).json("failed to register")
                }
            }
            // res.json("Okay")
        })
    } catch (err) {
        console.log(err)
    }
}
module.exports = uploadDoc;