How to get the form data inside NestJS controller

Question

I am in the process of rewriting an existing PHP-based API into NestJS (while learning NestJS at the same time).

Important bit is I cannot touch the frontend service, so I need to make sure that the new app can handle anything the frontend send to it, and respond with the same data structure the original api did.

And here is where I am hitting a wall. Everything submitted by frontend app is in the form of formdata. The only example give in NestJS documentation pertains to getting the uploaded file, but not any additional data that may come with it. Google search was not much of a help so far.

The best I found was this SO post Accept form-data in Nest.js but I am still unable to get the submitted data.

Submitted data:

> POST /public/login HTTP/1.1
> Host: localhost:3000
> Content-Type: multipart/form-data;
> Accept: */*
> Content-Length: 196

| Content-Disposition: form-data; name="login"
| sampleuser
| Content-Disposition: form-data; name="password"
| userpassword

content of my authentication.controller.ts:

import { Controller, Post, Body, Get, Param, Patch, Delete, Req, Header, UseInterceptors, } from "@nestjs/common";

@Controller()
export class AuthenticationController {

    constructor() { }

    @Post('public/login')
    @UseInterceptors()
    login(@Body() body) {
        console.log(body);
    }
}

the log result is simply {}

What am I missing/doing wrong here. Do I need to install some extra npm package to make this work? It surely cannot be that difficult to obtain such common data. Can someone point me to a right direction or a working example.

Thank you

score 2 · Answer 1 · answered Feb 25 '22 at 17:47

When providing form data (which is mostly for file uploading, or, at least, that's the only way I apply this content type), I think NestJS gives it the same approach. So, I would suggest using the FileInterceptor.

Try this:

import { Controller, Post, Body, Get, Param, Patch, Delete, Req, Header, UseInterceptors, } from "@nestjs/common";
import { FileInterceptor } from '@nestjs/platform-express';

@Controller()
export class AuthenticationController {

    constructor() { }

    @Post('public/login')
    // You're not actually providing a file, but the interceptor will expect "form data" 
    // (at least in a high level, that's how I think this interceptor works)
    @UseInterceptors(FileInterceptor('file'))
    login(@Body() body) {
        console.log(body);
    }
}

score 1 · Answer 2 · answered Sep 01 '22 at 05:10

You can try this below solution it may help you.

Controller:

import { FileInterceptor } from '@nestjs/platform-express';


@Post('public/login')
@UseInterceptors(FileInterceptor('file'))
public async publicLogin(
  @UploadedFile() file: Express.Multer.File,
  @Body() body,
) {
  // calling service function.
  return await this.loginService.publicLogin(file, body);
}

Service:

public async publicLogin(file: Express.Multer.File, body: any): Promise<any> {
  console.log(file); // we will get the file object here
  console.log(body); // we will get the additiondata of formData.
}

How to get the form data inside NestJS controller

2 Answers2

Related