node.js handling post form-data request

Question

I want to send form. In route when I use console.log(req.body) it log {}. Server see this request, bodyparser is correctly added. Any ideas what`s wrong? My html

<form class='product' id='add'>
    <input type="text" class="input1" name="name" placeholder="name">
    <input type="text" class="input1" name="type" placeholder="type">
    <input type="text" class="input1" name="producer" placeholder="producer">
    <input type="file" class="inputImage" name="image" accept="image/jpeg">
    <input type="text" class="input1" name="description" placeholder="description">
    <button type='button' class='modify' onclick="product.add()"> Add </button>
</form>    

my frontend JS

const product.add = () => {
    let data = new FormData(document.getElementById('add'));
    ajax(data, 'product/add', result => console.log(result));
}
const ajax = (data, url, callback) => {
    let xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            callback( JSON.parse( this.response ));
       }
    };
    xhttp.open("POST", url, true);
    xhttp.send( data ); 
};

my routes

router.all('/add', (req, res) => {
    console.log(req.body); //here log '{}'
});

Answer 1

It looks like you are including a file in your form, so the request will be sent as multipart/form-data. body-parser explicitly says on their npm page that they do not handle multipart bodies. They recommend a few modules--I use formidable

Hope this helps!