i am using multer to upload images , after uploading one i must refresh the page to be able to upload other image else i get error

Question

server side: i am using multer to upload images , after uploading one i must refresh the page to be able to upload other image else i get error

const storage = multer.diskStorage({
  destination: (req, file, cb) => {
    cb(null, imagesDirPath);
  },
  filename: (req, file, cb) => {
    cb(null, Date.now() + file.originalname);
  },
});
const upload = multer({
  storage: storage,
});

router.post("/addImage", auth, upload.single("file"), async (req, res) => {
  try {
    const image = new Image();
    image.src = req.file.filename;
    image.owner = req.user._id;
    await image.save();
    res.status(201).send({ msg: "image is uploaded" });
  } catch (e) {
    console.log(e);
    res.status(400).send();
  }
});

front side:

inputFile.addEventListener(
  "change",
  async () => {
    data.append("file", inputFile.files[0]);
    try {
      fetch("/addImage", {
        method: "POST",
        body: data,
      })
        .then((res) => res.json())
        .then((data) => alert(data.msg));
    } catch (e) {
      console.log(e);
    }
  },
  false
);

the error: MulterError: Unexpected field at wrappedFileFilter