Express express.urlencoded() Function

The express.urlencoded() middleware in Express.js is used to parse URL-encoded form data, making it accessible as a JavaScript object in req.body. It’s essential for handling form submissions in application/x-www-form-urlencoded format.

Syntax

app.use(
    express.urlencoded({
        extended: true,
        inflate: true,
        limit: "1mb",
        parameterLimit: 5000,
        type: "application/x-www-form-urlencoded",
    })
);

• extended: true : Allows parsing of nested objects and arrays using the qs library.
• inflate: true: Automatically decompresses gzip/deflate request bodies before parsing.
• limit: ‘1mb’: Restricts the maximum size of the request body to 1MB for security.
• parameterLimit: 5000: Limits the number of form fields to 5000 to prevent DoS attacks.
• type: ‘application/x-www-form-urlencoded’: Only parses requests with this MIME type.

How express.urlencoded Works?

The express.urlencoded() middleware processes URL-encoded form data, converts it into a JavaScript object, and makes it available via req.body.

1. First it processes form data sent via POST requests with application/x-www-form-urlencoded encoding.
2. Then it converts the incoming data into a JavaScript object and makes it accessible through req.body.
3. When { extended: true } is set, it supports nested objects and arrays using the qs library.
4. It includes security options like limit to restrict body size and parameterLimit to prevent excessive form fields.
5. It only parses requests with Content-Type: application/x-www-form-urlencoded, ignoring other data formats.

Now lets understand express.urlencoded with an example

const express = require('express')
const app = express()
const PORT = 3000
app.use(express.urlencoded({ extended: true }))
app.get('/login', (req, res) => {
    res.send('<form method=POST action=/login><input type=text name=username><input type=number name=age><input type=submit></form>')
})
app.post('/login', (req, res) => {
    console.log(req.body)
    res.send('data has been recieved by the server')
})
app.listen(PORT, () => {
    console.log('Server is running on localhost://3000')
})

Output

• Imports and Sets Up Express: The code imports Express, initializes an app instance, and sets a server port (3000).
• Middleware for Form Data Parsing: app.use(express.urlencoded({ extended: true })) is used to parse URL-encoded form data and make it available in req.body.
• GET Route for Login Form: When a user visits /login, a simple HTML form is displayed, allowing them to enter a username and age.
• POST Route to Handle Form Submission: When the form is submitted, the server logs the received data (req.body) and sends a response confirming receipt.
• Starts the Server: The app listens on port 3000, and logs Server is running on localhost://3000 when it starts.

Use cases of express.urlencoded

• Handling User Authentication Forms: Used to process login and signup forms, where users submit credentials like username and password via a POST request.
• Processing Contact or Feedback Forms: When users submit a contact form on a website, express.urlencoded() parses the form data (e.g., name, email, message) and makes it accessible in req.body.
• Submitting Order Forms in E-commerce Apps: When a customer fills out an order form, the middleware extracts details like product name, quantity, and address for order processing.
• Storing Survey or Questionnaire Responses: Used to collect and store survey responses, where users submit multiple-choice or text responses through a form.
• Handling Profile Update Forms: In user dashboards, when users update their name, bio, or preferences via a form, express.urlencoded() ensures the server correctly processes the updated data.

Conclusion

The express.urlencoded() middleware is crucial for handling application/x-www-form-urlencoded form submissions. It simplifies processing form data by converting it into a JavaScript object, which is easily accessible via req.body. This functionality is especially useful for login forms, registration pages, and other web forms that send user input to the server.

gouravhammad

Follow

Improve

Article Tags :

• Express.js
• JavaScript
• Node.js
• Web Technologies
• ExpressJS-Functions

+1 More