formData through http.post in angular + nodejs

Question

I'm facing an issue when I want to pass some data through http.post from my angular client to my node.js server.

Here is the thing, passing text with JSON.stringify(my text) works fine, but given that I want to pass a file + my text, I would like to use formData.

When I try to get back the data in the server side, my req.body is empty, and i'm not able to retrieve the data.

Here is my client side code :

[...]
var formData = new FormData();
        formData.append('name', product.name);
        formData.append('benefits_detail', product.benefits_detail);
        formData.append('sections', product.sections);
        formData.append('image', product.image);   // image is my file

            return this.http.post('http://localhost:3000/product', formData, {headers: headers}).map(........)

Then my server, where I try to get back my data :

router.post('/', function (req, res, next) {

    console.log('req.body');
    console.log(req.body);
    console.log(req.body.formData);

...

Here the console.log are empty like showing : {}

Anybody can help with this ?

Thanks you

Aurast · Accepted Answer · 2018-02-08 12:09:27Z

1

It looks like you're not using any body parsing middleware, which is required.

From the Express documentation for req.body

Contains key-value pairs of data submitted in the request body. By default, it is undefined, and is populated when you use body-parsing middleware such as body-parser and multer.

Try using body-parser

answered Feb 8, 2018 at 12:09

Aurast

3,75819 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Wesley Shann · Accepted Answer · 2018-02-08 12:14:10Z

0

For uploading images to a server, you could try to use the Ng File Upload directive. It has a directive to select the file in HTML and then to Upload the file to the server. If you are already selecting the image, I believe you can just use the Uploading part in JS to send the image (have never tried using the Upload without the file selector in HTML, but It should work).

However, this solution would require you to send two requests though, one for the data and another for the image.

answered Feb 8, 2018 at 12:14

Wesley Shann

633 silver badges7 bronze badges

Collectives™ on Stack Overflow

formData through http.post in angular + nodejs

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related