Req.body is empty object, TypeError:

Question

Error:

TypeError: Cannot destructure property 'firstName' of 'req.body.warranty' as it is undefined.

I tried to handle MulterError by this documentation https://www.npmjs.com/package/multer, but faced a problem.

Console.log(req.body) gives { }, while form enctype is equal to 'multipart/form-data'. If I change it to the 'application/x-www-form-urlencoded' req.body is normal, but files do not upload to the server.

Multer Usage

var storage = multer.diskStorage({
  destination:"./public/uploads/",
  filename:(req,file,cb)=>{
    cb(null,file.fieldname+"-"+Date.now()+path.extname(file.originalname));
  }
});

var upload = multer({
  storage: storage,
  limits:{fileSize: 10000000}
}).fields([{
           name: 'purchasePhoto', maxCount: 1
         }, {
           name: 'defectPhoto', maxCount: 1
         }]);

Post route from the warranty page with a form enctype="multipart/form-data"

router.post("/warranty", function(req, res){

  upload(req, res, function (err) {
    if (err instanceof multer.MulterError) {
      req.flash('error', 'Multer Error');
      return res.redirect('/pages/warranty#flash');
    } else if (err) {
      console.log('error');
    }
  });

 var  { firstName, lastName, streetAdress, city, state, zip, country, email, phoneNumber, product, bikeShop, assembledBy, issue} = req.body.warranty;

   var newWarranry = { purchasePhoto: purchasePhoto, defectPhoto: defectPhoto, firstName: firstName, lastName: lastName, streetAdress: streetAdress, city: city, state: state, zip: zip, country: country, email: email, phoneNumber: phoneNumber, product: product, bikeShop: bikeShop, assembledBy: assembledBy, issue: issue};
   
  if ( !firstName || !lastName || !streetAdress || !city || !state || !zip || !country || !email || !phoneNumber || !product || !bikeShop || !assembledBy ) {
    req.flash('error', 'Please enter all of the fields with "*"');
    return res.redirect('/pages/warranty#flash');
  } else{
    Warranty.create(newWarranry, function(err, newWarranry){
      if(err){
          console.log(err);
      }else{
         console.log(newWarranry);
         req.flash('success', 'Thank you! The form was submitted successfully.');
         return res.redirect('/pages/warranty#flash');
      }
    });
  } 
});

Warranty page form with a action="warranty" method="post" and enctype="multipart/form-data". All inputs with a name="warranty[...]"

<form action="warranty" method="post" enctype="multipart/form-data">
    <b>Warranty Claim Form</b>
    <h6>Rider Info</h6>
    <div class="row">
        <div>
            <input type="" name="warranty[firstName]" placeholder="First Name*">
        </div>
        <div>
            <input type="" name="warranty[lastName]" placeholder="Last Name*">
        </div>
        <div>
            <input type="" name="warranty[streetAdress]" placeholder="Street Adress*">
        </div>
        <div>
            <input type="" name="warranty[streetAdressLine]" placeholder="Street Adress Line 2">
        </div>
        <div>
            <input name="warranty[city]" placeholder="City*">
        </div>
        <div>
            <input type="" name="warranty[state]" placeholder="State/Province*">
        </div>
        <div>
            <input type="" name="warranty[zip]" placeholder="ZIP/Postal code*">
        </div>
        <div>
            <input type="" name="warranty[country]" placeholder="Country*">
        </div>
        <div>
            <input type="" name="warranty[email]" placeholder="Email*">
        </div>
        <div>
            <input type="" name="warranty[phoneNumber]" placeholder="Phone Number*">
        </div>
    </div>
        <h6>Product Details</h6>
    <div class="row">
        <div>
            <input name="warranty[product]" placeholder="Product (Ex. Titan II Frame)*">
        </div>
        <div>
            <input type="" name="warranty[color]" placeholder="Color (Ex. Black)">
        </div>
        <div>
            <input type="" name="warranty[size]" placeholder="Size (Ex. 20.5in / 175mm)">
        </div>
        <div>
            <input type="" name="warranty[serialNumber]" placeholder="Serial number or date code (bikes, frames, forks, bars, cranks only)">
        </div>
    </div>
    <h6>PURCHASE & ASSEMBLY DETAILS</h6>
    <div class="row">
        <div >
            <input name="warranty[bikeShop]" placeholder="Bike Shop or online retailer*">
        </div>
        <div>
            <input type="" name="warranty[modelYear]" placeholder="Model year (Ex.2015)">
        </div>
        <div >
            <input type="" name="warranty[assembledBy]" placeholder="Assembled by myself/ bike shop">
        </div>
    </div>
    <h6>PRODUCT ISSUE/DEFECT INFORMATION</h6>
    <div class="row">
        <div>
            <textarea name="warranty[issue]"></textarea>
        </div>
    </div>
    <h6>UPLOAD PROOF OF PURCHASE OR RECEIPT (SCAN OR MOBILE PHOTO)</h6>
    <div>
     
    <input type="file" name="purchasePhoto" id="fileOne">
    <label for="fileOne">
      <span>Upload file</span>
    </label>
   
  </div>
    <h6>UPLOAD PRODUCT IMAGES, INCLUDING IMAGES OF DEFECTS</h6>
    <div class="form-group">
    
    <input type="file" name="defectPhoto" id="fileTwo">
    <label for="fileTwo">
      <span>Upload file</span>
    </label>
  </div>
  <div>
    <button type="submit"><p>Submit</p></button>
  </div>
</form>

Answer 1

My problem was that I used

app.use(bodyParser.urlencoded({extended: true}));

But I had to use

app.use(bodyParser.urlencoded({extended: false}));