req.body become empty object when I added enctype='multipart/form-data' to form

I have a form which sends data to server: text fields and images. Before mounting formidable, my req.body got data which are stored in db. But when I added formidable middleware AND add to form attribute enctype=‘multipart/form-data’ which allows upload files to server, my req.body become just empty object, and, yes, I got uploaded images and vice versa: after removing this attribute, I have full req.body but images wasn’t uploaded.

I also tried to move mounting formidable into route.js file, but this did not help.

I’ve got such project structure:

bookController.js which imported into route.js

var BookEntity= require('../models/bookModel');
var formidable = require('formidable');

exports.addBook = function(req, res){  

      console.log(req.body.large_fotos);
      var largeFotosArray = [];      
      var form = formidable.IncomingForm({
            uploadDir: __dirname + '/uploads', 
            keepExtensions: true
      });
      form.parse(req, function(err, fields, files){
            console.log('INCOMING: ' + files);
      });
      form.on('fileBegin', function(name, file){
            file.path = __dirname + '/uploads/' + file.name;
            largeFotosArray.push(file.path);
      });
      form.on('file', function(name, file){
            console.log('Uploaded: ' + file.name);
      });

      // then saving Book in DB

});

route.js

    var express = require('express');
    var controller = require('../controllers/bookController');

     var subapp = express.Router();

   // included other routes...

     subapp.post('/book/add', function(req, res){
        console.log(req.body);
        controller.addBook(req, res);
    });

[ParallelUniv3rse]

Sorry, I forgot to follow-up with a fix. It’s quite simple, just don’t specify the Content-Type in the config yourself if you can. TLDR; setting Content-Type to only multipart/form-data is not enough. the required syntax is multipart/form-data; boundary=<somestring>

IIRC isomorphic-fetch does the work of specifying the correct header of your client-side request for you. I don’t know how about other libraries. If you need to specify it yourself stick to the required syntax as mentioned above. (pay attention to the boundary directive which is required. you can use something like in the example from the comments above

[TheBeachMaster]

@ParallelUniv3rse thanks for this…

Anyone else who experiences this issue in the future and wants a quick workaround… You can do it like this

    const formData =  new FormData();
    formData.append("file", upload.files[0]);
    fetch('/upload',{
      body: formData,
      headers: {
        'Accept' : 'application/json'
      },
      method: 'post'
    })
      .then(data => {
        console.log("Success", data);
        file='';
      })
      .catch(error => {
        console.log("There was a problem", error);
      });
  }

Note that upload is the id of your file input field. Also, note the omission of Content-Type.