How to access POST form fields in Express JS?
Express JS is used to build the application based on Node JS can be used to access the POST form fields. When the client submits the form with the HTTP POST method, Express JS provides the feature to process the form data. By this, we can retrieve the user input within the application and provide a dynamic response to the client.
Different ways to access the POST form filed in Express are defined below:
Table of Content
- Using body-parser Middleware
- Using multer Middleware
Approach 1: Using body-parser Middleware:
We are using the body-parser third-party middleware to parse and extract the form data from the POST requests in the Express.js application. We need to install the middleware first by using the command npm install body-parser. This middleware has 4 parsing modules JSON, Text, URL-encoded, and raw data sets.
Example: In the below example, we have used the body-parser middleware in the Express application which accesses the data from the POST requests.
Javascript
//app.js const express = require( 'express' ); const bodyParser = require( 'body-parser' ); const app = express(); // using body-parser middleware app.use(bodyParser.urlencoded({ extended: true })); // defining a route for the form app.post( '/submit' , (req, res) => { // accessing form fields from req.body const username = req.body.username; const password = req.body.password; // verification steps if (!username || !password) { return res.status(400).send( 'Username and password are required.' ); } // sending a response res.send(`Received: Username - ${username}, Password - ${password}`); }); // start the server const port = 3000; app.listen(port, () => { console.log(`Server is running on http: //localhost:${port}`); }); |
Output:
Approach 2: Using multer Middleware:
We are using the multer middleware which is used to handle multipart/form data or the file uploaded in Express applications. Using this middleware, we can properly handle the file uploads which are sent using POST form fields. As this is third-party middleware, we need to install it using npm install multer.
Example: In the below example, we are using the multer middleware to properly handle the file uploads. This expects the POST request to /submit route wit the ‘file‘ field for uploading the file and the textData field for the text area.
Javascript
const express = require( 'express' ); const multer = require( 'multer' ); const app = express(); // setting up multer to handle file uploads const upload = multer({ dest: 'uploads/' }); app.post( '/submit' , upload.single( 'file' ), (req, res) => { // check if the required fields are present if (!req.body.textData || !req.file) { return res.status(400) .json( { error: 'Please provide both textData and a file.' } ); } // process the form data const formData = { textData: req.body.textData, file: req.file, }; // send a success response res.status(200) .json( { message: 'Form data submitted successfully!' , formData } ); }); const PORT = 3000; app.listen(PORT, () => { console.log(`Server is running on http: //localhost:${PORT}`); }); |
Output:
Contact Us