Read application/X-www-form-urlencoded data from Angular2 in express

We've got a function which calls an API to upload files + normal form data a.k.a. strings

import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';

... other stuff ...

addDataWithFile(formData) {

  this.formData['logoUrl'] = this.uploader.queue[0];
  var headers = new Headers();
  headers.append('Content-Type', 'application/X-www-form-urlencoded');
  return this.http.post('/AddDataWithFile', formData, {
      headers: headers
    })
    .map((response: Response) => {
      console.log(response.json());
      return response.json();
    })
    .catch((error: Response) {
      console.log(error);
      return Observable.throw(error || 'server error');
    });
}

And the template like:

    <input #myInput type="file" ng2FileSelect (change)="readUrl($event)" [uploader]="uploader" />


  <form #f="ngForm" (submit)="addDataWithFile(f)" >

      <input type="text" maxlength="32" name="nm" [(ngModel)]="Info.Name" #nmField="ngModel" required>

      <label>name*</label>


      <textarea maxlength="500" [(ngModel)]="Info.Desc" name="Desc" #DescField="ngModel"></textarea>
      <label >Description</label>


    <input [disabled]="f.invalid" [class.btn-press]="'clicked' == val" (mousedown)="chk('clicked')" (mouseup)="chk('release')" (click)="addDataWithFile(f)" value="Save">
    <input id="cancel-btn" [disabled]="f.invalid" [class.btn-press]="'clicked1' == val" (mousedown)="chk('clicked1')" (mouseup)="chk('release')" (click)="onClose(f)" type="button" value="Cancel">

  </form>    

The code this.formData['logoUrl'] = this.uploader.queue[0]; gives the reference of the file being uploaded, however on the server side:

// consfiguration for uploading logo file.
const express = require('express');
const uuidV4 = require('uuid/v4');
const multer = require('multer');
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        if (fs.existsSync('./logos/')) {
            cb(null, './logos/')
        }
        else {
            fs.mkdir('./logos/', function () {
                cb(null, './logos/');
            });
        }
    },
    filename: function (req, file, cb) {
        const file_split = file.originalname.split('.')
        const file_ext = file_split[file_split.length - 1];
        cb(null, uuidV4() + '.' + file_ext);
    }
});

const app = express();
const upload = multer({ storage: storage });

let router = express.Router();

... other stuff ...

// add data with file
router.post('/AddDataWithFile', [upload.single('logo'), routes.middleware], (req, res)=>{
    console.log("req.body.logoUrl ", req.body.logoUrl);
});

The value of req.body.logoUrl is coming as undefined.

via xameeramir