CODEWITHSUNDEEP
node.jsexpresspostmultipartform-databody-parser
Jem
Jem

Reputation: 6406

Node.js (with express & bodyParser): unable to obtain form-data from post request

I can't seem to recover the form-data of a post request sent to my Node.js server. I've put below the server code and the post request (sent using postman in chrome):

Post request

POST /api/login HTTP/1.1
Host: localhost:8080
Cache-Control: no-cache

----WebKitFormBoundaryE19zNvXGzXaLvS5C
Content-Disposition: form-data; name="userName"

jem
----WebKitFormBoundaryE19zNvXGzXaLvS5C

NodeJS server code

var express    = require('express');        // call express
var app        = express();                 // define our app using express
var bodyParser = require('body-parser');

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

app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,accept,access_token,X-Requested-With');
    next();
});

var port = process.env.PORT || 8080;        // set our port

var router = express.Router();              // get an instance of the express Router

router.get('/', function(req, res) {

    res.json({ message: 'I am groot!' });   
});

// Login
router.route('/login')

    .post(function(req, res){

        console.log('Auth request recieved');

        // Get the user name
        var user = req.body.userName;

        var aToken = getToken(user);

        res.json({

            'token':'a_token'
        });
    });

app.use('/api', router);

app.listen(port);

The login method tries to obtain the req.body.userName, however, req.body is always empty. I've seen other cases on SO describing such behavior but none of the related answers did apply here.

Thanks for helping out.

Upvotes: 54

Views: 142693

Answers (8)

iku
iku

Reputation: 974

If your content type is Content-Type: multipart/form-data then you have to use a middleware. Add the following code to your index.ts file,

import express from 'express';
import multer from 'multer';

const app = express();

app.use(express.urlencoded({ extended: true }));
app.use(multer().any());
app.use(express.json());

Upvotes: 0

harbrinder_singh
harbrinder_singh

Reputation: 462

I figured it out that in my case I was not using "name" attribute with the HTML input tags. I fixed it by changing:

This

<input id="first_name" />

To

<input id="first_name" name="first_name" />

Upvotes: 0

yaya
yaya

Reputation: 8243

  • For Json: Use body-parser.
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

(you should Also send Content-Type: application/json in request header)

  • For Normal Form, Or multipart form (form with files), Use body-parser + multer.
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))
app.use(multer().array())

(You should NOT send Content-Type: application/json in this case. you should send nothing, or Content-Type: multipart/form-data if you have files in form.

  • in postman you should not send Content-Type: multipart/form-data manually. otherwise you'll get an error (Boundary not found). (it will add this automatically.).)

Upvotes: 6

Saifio
Saifio

Reputation: 371

Make sure you are not sing enctype as multipart/form-data, body parser does not support it. use below line before you define any route.

app.use(bodyParser.urlencoded()); app.use(bodyParser.json());

Upvotes: 1

Harshan Morawaka
Harshan Morawaka

Reputation: 739

I followed this https://www.tutorialspoint.com/expressjs/expressjs_form_data.htm

var bodyParser = require('body-parser');
var multer = require('multer');
var forms = multer();

// apply them

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

// how to use

router.post('/', function(req, res) {
    console.log(req.body);
    console.log('received the widget request');
});

Upvotes: 16

Aecio Levy
Aecio Levy

Reputation: 155

Make sure to put in this order: bodyParser.json() first. app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true }));

Upvotes: 4

Sanjeev Kumar
Sanjeev Kumar

Reputation: 457

To handle multipart/form-data request that support file upload, you need to use multer module. npm link for multer middleware

Upvotes: 7

cybersam
cybersam

Reputation: 66947

In general, an express app needs to specify the appropriate body-parser middleware in order for req.body to contain the body.

[EDITED]

  1. If you required parsing of url-encoded (non-multipart) form data, as well as JSON, try adding:

    // Put this statement near the top of your module
var bodyParser = require('body-parser');


// Put these statements before you define any routes.
app.use(bodyParser.urlencoded());
app.use(bodyParser.json());

    First, you'll need to add body-parser to the dependencies property of your package.json, and then perform a npm update.

  2. To handle multi-part form data, the bodyParser.urlencoded() body parser will not work. See the suggested modules here for parsing multipart bodies.

Upvotes: 49

Related Questions