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.

Sentry blog image

How to reduce TTFB

In the past few years in the web dev world, we’ve seen a significant push towards rendering our websites on the server. Doing so is better for SEO and performs better on low-powered devices, but one thing we had to sacrifice is TTFB.

In this article, we’ll see how we can identify what makes our TTFB high so we can fix it.

Read more

Top comments (0)

SurveyJS custom survey software

JavaScript Form Builder UI Component

Generate dynamic JSON-driven forms directly in your JavaScript app (Angular, React, Vue.js, jQuery) with a fully customizable drag-and-drop form builder. Easily integrate with any backend system and retain full ownership over your data, with no user or form submission limits.

Learn more