How to access POST form fields in Express
Asked Answered
S

24

919

Here is my simple form:

<form id="loginformA" action="userlogin" method="post">
    <div>
        <label for="email">Email: </label>
        <input type="text" id="email" name="email"></input>
    </div>
<input type="submit" value="Submit"></input>
</form>

Here is my Express.js/Node.js code:

app.post('/userlogin', function(sReq, sRes){    
    var email = sReq.query.email.;   
}

I tried sReq.query.email or sReq.query['email'] or sReq.params['email'], etc. None of them work. They all return undefined.

When I change to a Get call, it works, so .. any idea?

Sex answered 19/4, 2011 at 0:38 Comment(1)
SECURITY: everybody using bodyParser() from answers here should also read @SeanLynch 's answer belowLionize
J
1405

Things have changed once again starting Express 4.16.0, you can now use express.json() and express.urlencoded() just like in Express 3.0.

This was different starting Express 4.0 to 4.15:

$ npm install --save body-parser

and then:

var bodyParser = require('body-parser')
app.use( bodyParser.json() );       // to support JSON-encoded bodies
app.use(bodyParser.urlencoded({     // to support URL-encoded bodies
  extended: true
})); 

The rest is like in Express 3.0:

Firstly you need to add some middleware to parse the post data of the body.

Add one or both of the following lines of code:

app.use(express.json());       // to support JSON-encoded bodies
app.use(express.urlencoded()); // to support URL-encoded bodies

Then, in your handler, use the req.body object:

// assuming POST: name=foo&color=red            <-- URL encoding
//
// or       POST: {"name":"foo","color":"red"}  <-- JSON encoding

app.post('/test-page', function(req, res) {
    var name = req.body.name,
        color = req.body.color;
    // ...
});

Note that the use of express.bodyParser() is not recommended.

app.use(express.bodyParser());

...is equivalent to:

app.use(express.json());
app.use(express.urlencoded());
app.use(express.multipart());

Security concerns exist with express.multipart(), and so it is better to explicitly add support for the specific encoding type(s) you require. If you do need multipart encoding (to support uploading files for example) then you should read this.

Junco answered 17/8, 2012 at 15:30 Comment(10)
If this answer isn't working right, make sure you have the content-type header set, for example: curl -d '{"good_food":["pizza"]}' -H 'content-type:application/json' "http://www.example.com/your_endpoint"Dramatics
what is the difference between posting a form with name/value pairs and posting a JSON body? Do they both show up in req.body?Impeach
@Impeach Yes, they do. bodyParser abstracts JSON, URL-encoded and multipart data into the req.body object.Tinderbox
express.json() etc. are part of connect, not express, so, middlewars are should be referenced by connect.middelwarename instead of express.middlewareDuct
This code gave me errors as middleware is no longer bundled with Express; you'll have to use body-parser: github.com/senchalabs/connect#middlewareAir
app.use(bodyParser.urlencoded({ extended: true })); works without errorPennant
For reading json using Express 4, only the app.use(require('body-parser').json()) line is sufficient. And then you can read the json data from your request's body object, i.e. req.body, from within a route definition.Opinionative
I'm trying to understand why JSON.parse('{'+params.split('=') .join(':') .split('&') .join(',')+'}'); needed to be its own separate middleware component rather than something Express.js just does out of the box. How is sifting through now dozens of dependencies to make the simplest things happen any easier than just using http.listen?Cerda
You're already telling express what to use. Omit the following and it'll work just fine. app.use(express.json()); // to support JSON-encoded bodies app.use(express.urlencoded()); // to support URL-encoded bodiesThreephase
can i change the data type at this point. i am using strongloop and I want to change the the incoming string to number ? How to do that ?Epicedium
R
108

Security concern using express.bodyParser()

While all the other answers currently recommend using the express.bodyParser() middleware, this is actually a wrapper around the express.json(), express.urlencoded(), and express.multipart() middlewares (http://expressjs.com/api.html#bodyParser). The parsing of form request bodies is done by the express.urlencoded() middleware and is all that you need to expose your form data on req.body object.

Due to a security concern with how express.multipart()/connect.multipart() creates temporary files for all uploaded files (and are not garbage collected), it is now recommended not to use the express.bodyParser() wrapper but instead use only the middlewares you need.

Note: connect.bodyParser() will soon be updated to only include urlencoded and json when Connect 3.0 is released (which Express extends).


So in short, instead of ...

app.use(express.bodyParser());

...you should use

app.use(express.urlencoded());
app.use(express.json());      // if needed

and if/when you need to handle multipart forms (file uploads), use a third party library or middleware such as multiparty, busboy, dicer, etc.

Ressler answered 21/11, 2013 at 22:0 Comment(3)
Added a comment below question so more people see your concerns and advice. Would other solutions detailed in Andrew Kelley blog post (still) relevant in your opinion? (just asking for others, my needs are purely for internal tools ^^)Lionize
@Lionize - Yes, and I meant to reference Andrew's post as well. Any of those suggestions (taking into consideration the downfalls of each) are relevant.Ressler
Also, once Connect 3.0 is released without including multipart() as part of bodyParser(), bodyParser() becomes "safe" again, but you will need to explicitly enable multipart support using a third party library.Ressler
K
88

Note: this answer is for Express 2. See here for Express 3.

If you're using connect/express, you should use the bodyParser middleware: It's described in the Expressjs guide.

// example using express.js:
var express = require('express')
  , app = express.createServer();
app.use(express.bodyParser());
app.post('/', function(req, res){
  var email = req.param('email', null);  // second parameter is default
});

Here's the original connect-only version:

// example using just connect
var connect = require('connect');
var url = require('url');
var qs = require('qs');
var server = connect(
  connect.bodyParser(),
  connect.router(function(app) {
    app.post('/userlogin', function(req, res) {
      // the bodyParser puts the parsed request in req.body.
      var parsedUrl = qs.parse(url.parse(req.url).query);
      var email = parsedUrl.email || req.body.email;;
    });
  })
);

Both the querystring and body are parsed using Rails-style parameter handling (qs) rather than the low-level querystring library. In order to parse repeated parameters with qs, the parameter needs to have brackets: name[]=val1&name[]=val2. It also supports nested maps. In addition to parsing HTML form submissions, the bodyParser can parse JSON requests automatically.

Edit: I read up on express.js and modified my answer to be more natural to users of Express.

Kastner answered 19/4, 2011 at 2:21 Comment(2)
Hmm ok. i try the bodyParser(). the doc says i can get it from req.query() but i got nothing. that's very weird. I have no problem with Get tho.Sex
No, req.query is ONLY the GET params. You get the POST data through req.body. The function req.params() includes them both.Kastner
F
42

This will do it if you want to build the posted query without middleware:

app.post("/register/",function(req,res){
    var bodyStr = '';
    req.on("data",function(chunk){
        bodyStr += chunk.toString();
    });
    req.on("end",function(){
        res.send(bodyStr);
    });

});

That will send this to the browser

email=emailval&password1=pass1val&password2=pass2val

It's probably better to use middleware though so you don't have to write this over and over in each route.

Foltz answered 22/7, 2014 at 2:19 Comment(3)
sooo.... handy, for those that don't want to rely on a library that will sooner or later be deprecatedGeronto
you could easily build your own middlewareCallaghan
This is a great answer but why there is extra text "----------------------------359856253150893337905494 Content-Disposition: form-data; name="fullName" Ram ----------------------------359856253150893337905494--" I don't want that number.Fragment
G
29

Note for Express 4 users:

If you try and put app.use(express.bodyParser()); into your app, you'll get the following error when you try to start your Express server:

Error: Most middleware (like bodyParser) is no longer bundled with Express and must be installed separately. Please see https://github.com/senchalabs/connect#middleware.

You'll have to install the package body-parser separately from npm, then use something like the following (example taken from the GitHub page):

var express    = require('express');
var bodyParser = require('body-parser');

var app = express();

app.use(bodyParser());

app.use(function (req, res, next) {
  console.log(req.body) // populated!
  next();
})
Grassplot answered 10/5, 2014 at 20:52 Comment(1)
heplp: body-parser deprecated bodyParser: use individual json/urlencoded middlewaresLaurynlausanne
B
24

Given some form:

<form action='/somepath' method='post'>
   <input type='text' name='name'></input>
</form>

Using express

app.post('/somepath', function(req, res) {

    console.log(JSON.stringify(req.body));

    console.log('req.body.name', req.body['name']);
});

Output:

{"name":"x","description":"x"}
req.param.name x
Broadtail answered 20/1, 2012 at 11:12 Comment(4)
didnt work for me. need to use app.use(express.bodyParser());Burin
@Burin absolutely right same here but express.bodyParser() not working as well for me it deprecatedLaurynlausanne
@MohammadFaizankhan it was an experimental work, I didn't use express anymore, can't help now. Google it for similar functions to express.bodyParser(). good lucky!Burin
This works only if you are using body-parserTrapshooting
L
21

Backend:

import express from 'express';
import bodyParser from 'body-parser';

const app = express();
app.use(bodyParser.json()); // add a middleware (so that express can parse request.body's json)

app.post('/api/courses', (request, response) => {
  response.json(request.body);
});

Frontend:

fetch("/api/courses", {
  method: 'POST',
  body: JSON.stringify({ hi: 'hello' }), // convert Js object to a string
  headers: new Headers({ "Content-Type": "application/json" }) // add headers
});
Latifundium answered 5/8, 2016 at 18:5 Comment(0)
C
16
app.use(express.bodyParser());

Then for app.post request you can get post values via req.body.{post request variable}.

Cupellation answered 9/4, 2012 at 19:18 Comment(2)
your post request variable here, is that the id of the input field in question or the whole form or what?Goldfarb
express.bodyParser() is deprecated. update your answerLaurynlausanne
V
15

Update for Express 4.4.1

Middleware of the following is removed from Express.

  • bodyParser
  • json
  • urlencoded
  • multipart

When you use the middleware directly like you did in express 3.0. You will get the following error:

Error: Most middleware (like urlencoded) is no longer bundled with Express and 
must be installed separately.


In order to utilize those middleware, now you need to do npm for each middleware separately.

Since bodyParser is marked as deprecated, so I recommend the following way using json, urlencode and multipart parser like formidable, connect-multiparty. (Multipart middleware is deprecated as well).

Also remember, just defining urlencode + json, the form data will not be parsed and req.body will be undefined. You need to define a middleware handle the multipart request.

var urlencode = require('urlencode');
var json = require('json-middleware');
var multipart = require('connect-multiparty');
var multipartMiddleware = multipart();

app.use(json);
app.use(urlencode);
app.use('/url/that/accepts/form-data', multipartMiddleware);
Vignette answered 12/6, 2014 at 4:13 Comment(3)
i guess this is really bad feature updationLaurynlausanne
just for the sake of body parse i have to do lots of code. what the hack isLaurynlausanne
I had to add ".middleware()" to require('json-middleware') to get this to work.Bra
N
12

Update

As of Express version 4.16+, their own body-parser implementation is now included in the default Express package so there is no need for you to download another dependency.

You may have added a line to your code that looks like the following:

app.use(bodyparser.json()); //utilizes the body-parser package

If you are using Express 4.16+ you can now replace that line with:

app.use(express.json()); //Used to parse JSON bodies

This should not introduce any breaking changes into your applications since the code in express.json() is based on bodyparser.json().

If you also have the following code in your environment:

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

You can replace that with:

app.use(express.urlencoded()); //Parse URL-encoded bodies

A final note of caution: There are still some very specific cases where body-parser might still be necessary but for the most part Express’ implementation of body-parser is all you will need for the majority of use cases.

(See the docs at expressjs/bodyparser for more details).

Nealy answered 21/9, 2020 at 20:39 Comment(0)
D
9

I was searching for this exact problem. I was following all the advice above but req.body was still returning an empty object {}. In my case, it was something just as simple as the html being incorrect.

In your form's html, make sure you use the 'name' attribute in your input tags, not just 'id'. Otherwise, nothing is parsed.

<input id='foo' type='text' value='1'/>             // req = {}
<input id='foo' type='text' name='foo' value='1' /> // req = {foo:1}

My idiot mistake is your benefit.

Decathlon answered 18/11, 2016 at 14:20 Comment(1)
Same problem here. But I was using the name attribute from the start. Let's see what the problem is.Purgative
D
8

You shoudn't use app.use(express.bodyParser()). BodyParser is a union of json + urlencoded + mulitpart. You shoudn't use this because multipart will be removed in connect 3.0.

To resolve that, you can do this:

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

It´s very important know that app.use(app.router) should be used after the json and urlencoded, otherwise it does not work!

Diabetes answered 18/2, 2014 at 13:52 Comment(0)
S
8

For Express 4.1 and above

As most of the answers are using to Express, bodyParser, connect; where multipart is deprecated. There is a secure way to send post multipart objects easily.

Multer can be used as replacement for connect.multipart().

To install the package

$ npm install multer

Load it in your app:

var multer = require('multer');

And then, add it in the middleware stack along with the other form parsing middleware.

app.use(express.json());
app.use(express.urlencoded());
app.use(multer({ dest: './uploads/' }));

connect.json() handles application/json

connect.urlencoded() handles application/x-www-form-urlencoded

multer() handles multipart/form-data

Stirpiculture answered 30/8, 2015 at 10:37 Comment(0)
D
8

Express v4.17.0

app.use(express.urlencoded( {extended: true} ))

app.post('/userlogin', (req, res) => {    

   console.log(req.body) // object

   var email = req.body.email;

}

express.urlencoded

Demo Form

Another Answer Related

Diophantus answered 16/12, 2020 at 5:35 Comment(2)
what is the purpose of setting extended to true? what does that mean?Prolepsis
This option allows to choose between parsing the URL-encoded data with the querystring library (when false) or the qs library (when true). The “extended” syntax allows for rich objects and arrays to be encoded into the URL-encoded format, allowing for a JSON-like experience with URL-encoded.Diophantus
R
6

Written at Express version 4.16

Inside the router function you can use req.body property to access the post variable. For example if this was the POST route of your form, it would send back what you input:

function(req,res){
      res.send(req.body);

      //req.body.email would correspond with the HTML <input name="email"/>
}

P.S. for those who are familiar with PHP: In order to access PHP's $_GET variable we use req.query and to access PHP's $_POST variable we use req.body in Node.js.

Riel answered 4/10, 2019 at 16:33 Comment(0)
M
5

Request streaming worked for me

req.on('end', function() {
    var paramstring = postdata.split("&");
});

var postdata = "";
req.on('data', function(postdataChunk){
    postdata += postdataChunk;
});
Muddlehead answered 29/4, 2015 at 18:1 Comment(1)
Better than doing postdata.split("&") would be to load core module querystring = require('querystring') and then parse your postdata with querystring.parse(postdata);Newland
T
4

I could find all parameters by using following code for both POST and GET requests.

var express = require('express');
var app = express();
const util = require('util');
app.post('/', function (req, res) {
    console.log("Got a POST request for the homepage");
    res.send(util.inspect(req.query,false,null));
})
Trunks answered 21/9, 2016 at 13:8 Comment(1)
do you mind updating the answer with your version of express?Deina
C
3

Other answers talk about the middleware to use on the server side. My answer attempt to provide developers with a simple playbook to debug the problem themselves.


In this question, the situation is:

  • You have a form on the client side
  • The data is sent by clicking on Submit button and you don't use JavaScript to send requests (so no fetch, axios, xhr,... but we can extend the solution for these cases later)
  • You use Express for the server side
  • You cannot access data in your Express code. req.body is undefined

There are some actions that you can do to find the solution by yourself:

  1. Open the Network tab and search for your request.
  2. Check the request header Content-Type. In this situation (form submit), the header is likely application/x-www-form-urlencoded or multipart/form-data if you send a file (with enctype="multipart/form-data" in the form tag)
  3. Now check your Express code if you use the appropriate middleware to parse incoming requests.
  • If your Content-Type is application/x-www-form-urlencoded then you should have app.use(express.urlencoded({extended: true})) in your code.

  • If your Content-Type is multipart/form-data: because Express doesn't have a built-in middleware to parse this kind of request, you should another library for that. multer is a good one.

  1. If you have done all the steps above, now you can access data in req.body :). If you have problems with the syntax, you should check the Express document page. The syntax could be changed because this question is posted a long time ago.

Now, we can extend this simple playbook for other cases that involve JavaScript code. The key is to check the request Content-Type. If you see application/json then you should use app.use(express.json()) in your code.

In summary, find your request Content-Type, then use the appropriate middleware to parse it.

Corruptible answered 9/8, 2022 at 2:31 Comment(0)
R
2

from official doc version 4

const express = require('express')
const app = express()
app.use(express.json());
app.use(express.urlencoded({ extended: true })) 

app.post('/push/send', (request, response) => {
  console.log(request.body)
})
Russ answered 10/9, 2020 at 8:3 Comment(0)
H
1

Post Parameters can be retrieved as follows:

app.post('/api/v1/test',Testfunction);
http.createServer(app).listen(port, function(){
    console.log("Express server listening on port " + port)
});

function Testfunction(request,response,next) {
   console.log(request.param("val1"));
   response.send('HI');
}
Hammett answered 11/10, 2017 at 15:30 Comment(1)
do you realize this won't work ? param is used for GET requests.. not POST and your example lacks of details, very confusing for new comers. And on top of that request.param is actually deprecated, so your example is wrong on so many levels.Solnit
M
1

Use express-fileupload package:

var app = require('express')();
var http = require('http').Server(app);
const fileUpload = require('express-fileupload')

app.use(fileUpload());

app.post('/', function(req, res) {
  var email = req.body.email;
  res.send('<h1>Email :</h1> '+email);
});

http.listen(3000, function(){
  console.log('Running Port:3000');
});
Mccaleb answered 6/11, 2017 at 13:46 Comment(0)
G
1
var express        =         require("express");
var bodyParser     =         require("body-parser");
var app            =         express();

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

app.get('/',function(req,res){
  res.sendfile("index.html");
});
app.post('/login',function(req,res){
  var user_name=req.body.user;
  var password=req.body.password;
  console.log("User name = "+user_name+", password is "+password);
  res.end("yes");
});
app.listen(3000,function(){
  console.log("Started on PORT 3000");
})
Gazpacho answered 19/1, 2018 at 20:51 Comment(0)
C
0

You are using req.query.post with wrong method req.query.post works with method=get, method=post works with body-parser.

Just try this by changing post to get :

<form id="loginformA" action="userlogin" method="get">
<div>
    <label for="email">Email: </label>
    <input type="text" id="email" name="email"></input>
</div>
<input type="submit" value="Submit"></input>  
</form>

And in express code use 'app.get'

Conga answered 7/3, 2018 at 5:25 Comment(1)
There are a number of reasons to use POST instead of GET- security and data size are right out in front - so this is not an apt approach.Mota
F
-2

when you are using POST method in HTML forms, you need to catch the data from req.body in the server side i.e. Node.js. and also add

var bodyParser = require('body-parser')
app.use( bodyParser.json() );    
app.use(bodyParser.urlencoded({extended: false}));

OR

use method='GET' in HTML and and catch the data by req.query in the server side i.e. Node.js

Fruition answered 3/8, 2020 at 5:52 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.