DEV Community

Cover image for How to access submitted form data value from request in ExpressJS
Adrian Matei for Codever

Posted on • Edited on • Originally published at codever.dev

2 1

How to access submitted form data value from request in ExpressJS

Project: Codever - File: user.router.js

The values are present in the request.body which contains key-value pairs of data submitted in the request body.

In our case we access the userDisplayName with the following expression request.body.userDisplayName as in the example below:

usersRouter.post('/:userId/bookmarks/upload', keycloak.protect(),
  uploadBookmarks.single("bookmarks" /* name attribute of <file> element in your form */),
  async (request, response) => {
    userIdTokenValidator.validateUserId(request);

    const userDisplayName = request.body.userDisplayName;
    const importResponse = await browserBookmarksImportService.imporBrowserBookmarks(request.params.userId, request.file.buffer, userDisplayName);

    const str = JSON.stringify(importResponse, null, 2); // spacing level = 2
    console.log(str);

    return response.status(HttpStatus.OK).send(importResponse);
  }
);
Enter fullscreen mode Exit fullscreen mode

In angular the userDisplayName value has been appended to the FormData and submitted to a post request
via the Angular Http Client:

  uploadBookmarks(userId: String, bookmarks: File, userDisplayName: string): Observable<any> {
    const formData = new FormData();
    formData.append('bookmarks', bookmarks);
    formData.append('userDisplayName', userDisplayName);

    return this.httpClient.post(`${this.usersApiBaseUrl}/${userId}/bookmarks/upload`, formData);
  }
Enter fullscreen mode Exit fullscreen mode


Reference -

https://expressjs.com/en/api.html#req.body


Shared with ❤️ from Codever. Use 👉 copy to mine functionality to add it to your personal snippets collection.

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay