Node & Express Error: Unable to Obtain Form-Data from POST Request

When working with Node.js and Express, encountering errors related to handling form-data in POST requests can be a common issue. This happens usually because the body-parser middleware, which is used to parse incoming request bodies, is not configured properly or not included at all in the application.

Understanding the Problem

Express.js does not handle reading data from the <form> element in HTML out of the box. To do this, it requires additional middleware to parse the form data and add it to the req.body object. If such middleware is not correctly set up or configured, you might encounter errors when trying to access form-data.

Steps to Fix the Error

To handle form-data correctly in Express, you need to:

1. Install body-parser middleware if you’re using an older version of Express, which does not come with it built-in.
2. Use the included express.urlencoded() middleware if you’re using a more recent version of Express.

Using body-parser Middleware

For older versions of Express, do the following:

// Install the body-parser package
npm install body-parser

// Include it in your project
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

// Configure body-parser to handle POST requests
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

// Your other express code ...

Using Express Built-In Middleware

For newer versions of Express (since version 4.16.0), body-parser has been re-added to Express, so separate installation is not necessary. You can use the following code:

// Require Express
const express = require('express');
const app = express();

// Use express built-in middleware
app.use(express.urlencoded({ extended: true })); // Recognize incoming Request Object as strings or arrays
app.use(express.json()); // Recognize incoming Request Object as a JSON Object

// Your other express code ...

Complete Code Example

// Initializing express application
const express = require('express');
const app = express();

// Using express built-in middleware for urlencoded form data
app.use(express.urlencoded({ extended: true }));
app.use(express.json());

// Handling POST request
app.post('/submit-form', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;
    // Do something with the username and password
    res.send('Form received');
});

// Start the server
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server running on port ${PORT}`);
});

This server code sets up an Express application that accepts URL-encoded form data and JSON payload. When the form is submitted to the /submit-form route, you can access the form data via req.body.