Headers and body data going empty in http request

Question

This is how my service book.service.ts looks

import {Injectable} from '@angular/core';
import {Http,Response,Headers,RequestOptions} from '@angular/http';
import {NgForm} from '@angular/forms';
import {Books} from './books'
import {Observable} from 'rxjs/Observable'
import 'rxjs/add/operator/map'; 
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/toPromise';


@Injectable()
export class BooksService
{
  private api = "api";
  constructor(private http:Http){}
   add_book(add_book_form,book_pdf_copy:FileList,book_pdf_sample:FileList,book_cover_image:FileList):Observable<Books[]>
  {

    let formData:FormData = new FormData();
    let pdf_copy: File = book_pdf_copy[0];
    let pdf_sample: File = book_pdf_sample[0];
    let cover_image: File = book_cover_image[0];
    for(let b in add_book_form)
    formData.append(b, add_book_form[b]);
    //console.log(formData);    
    formData.append('book_pdf_copy', pdf_copy, pdf_copy.name);
    formData.append('book_pdf_sample', pdf_sample, pdf_sample.name);
    formData.append('book_cover_image', cover_image, cover_image.name);
    let headers = new Headers(      );

    let options = new RequestOptions({headers:headers});
    return this.http.post(this.api+'/add_book',formData,options)
    .map(this.extractPromiseData)
    //.toPromise()
    .catch(this.handleError);
}

extractPromiseData(res:Response)
{
    let body = res.json();
    return body;
}

// handleError(error:Response)
// {
//     throw(error);
// }

private handleError (error: Response | any) {
    //console.error(error.message || error);
    return Observable.throw(error.message || error);
    }
 }

But when I execute the above function on form submit, firefox developer console shows no headers for this request

I searched related articles on Internet, but I didn't found any solution. I am using and angular 4 and nodejs express framework. When I try to log the req.body in nodejs it shows empty body. Please help me to solve this issue. I recently updated to angular2 same FormData was working fine before upgrading to angular 4. I know it is problem related with Formdata and header options, but don't know way to solve it. Any assistance will be helpful.

Thanks,

Answer 1

Well, your headers might be empty because at least in the code sample, they are empty.

Try this:

const data = new FormData();
// ... rest
const headers = new Headers({
  'Content-Type': "multipart/form-data"
});
const options = new RequestOptions({ headers });
return this.http.post(url, data, options)
  .map(res => res.json());

Answer 2

I had just added return statement at the start of nodejs backend api, just by removing return statement from code, headers were visible in the firefox developer console and thereby adding following code

const fileUpload = require('express-fileupload');
app.use(fileUpload());

in server.js solved by problem.

Thanks