formData POST request with XMLHttpRequest() not working, but working in postman

Question

I've been trying to make a POST request which uploads an image to MongoDB. The image is of dataUrl type, and when the screenshot is taken, it is shown in my "network" tab in chrome.

My server side functions are working fine as i've tried making post requests with postman, and the images upload with no problem. However with code, it doesnt seem to work.

script.js

function takeScreenshot(video){

    SScanvas.getContext('2d').drawImage(video,0,0)
    let dataUrl = SScanvas.toDataURL('image/png');
    img.src = dataUrl;
    var hrefElement = document.createElement('a');
    hrefElement.href = dataUrl;
    document.body.append(hrefElement);
    /*
    hrefElement.download =  caughtNum + ' Time' + '.png';
    hrefElement.click();
    hrefElement.remove();
    */
    caughtNum++;

    //var base64img = dataUrl.replace(/^data:image\/(png|jpg);base64,/, "");

    postDB(dataUrl);
   
 }

function postDB(imageURL){
 
     var formData = new FormData();
     var img = imageURL; 
     var blob = new Blob([img], { type: "image/png"});
     formData.append("screenshot", blob);
     
     var request = new XMLHttpRequest();
  
     request.open("POST", "/api/employee/store");
     request.setRequestHeader("Content-Type", "multipart/form-data; boundary=<calculated when request is sent>");
     request.send(formData);

}

Server Side router.js

const express = require('express')
const router = express.Router()


const EmployeeController = require('../controllers/EmployeeController')
const upload = require('../middleware/upload')

router.get('/', EmployeeController.index)
router.post('/show', EmployeeController.show)
router.post('/store', upload.single('screenshot'), EmployeeController.store)
router.post('/update', EmployeeController.update)
router.post('/delete', EmployeeController.destroy)

module.exports = router

EmployeeController.js

//Function to store employee details
const store = (req,res,next) =>{

    let employee = new Employee({
        name : req.body.name,
        designation: req.body.designation,
        email : req.body.email,
        created : myDate,
        age : req.body.age
    })

    if(req.file){
        employee.screenshot = req.file.path
    }

    employee.save()

    .then(response=>{
        res.json({
            message : response 
        })
    })

    .catch(error=>{
        res.json({
            message : "An error has occured!"
        })
    })
}

Answer 1

request.setRequestHeader("Content-Type", "multipart/form-data; boundary=<calculated when request is sent>");

It is not calculated when the request is sent because you have set it explicitly.

Remove that line so it can be calculated automatically.