Although it may seem like it's too late now, but I believe this information could still be beneficial to someone out there.

By utilizing the deep-parse-json library, my approach involves creating a custom ParseFormDataJsonPipe and incorporating it just before the ValidationPipe. This pipe allows for passing a specified list of form-data properties in the constructor to maintain certain elements such as images, binaries, JSON arrays, etc.

import { PipeTransform, ArgumentMetadata } from '@nestjs/common';
import { deepParseJson } from 'deep-parse-json';
import * as _ from 'lodash';

type TParseFormDataJsonOptions = {
  except?: string[];
};

export class ParseFormDataJsonPipe implements PipeTransform {
  constructor(private options?: TParseFormDataJsonOptions) {}

  transform(value: any, _metadata: ArgumentMetadata) {
    const { except } = this.options;
    const serializedValue = value;
    const originProperties = {};
    if (except?.length) {
      _.merge(originProperties, _.pick(serializedValue, ...except));
    }
    const deserializedValue = deepParseJson(value);
    console.log(`deserializedValue`, deserializedValue);
    return { ...deserializedValue, ...originProperties };
  }
}

Below is an illustration of how this can be utilized within a controller:

@Post()
@ApiBearerAuth('admin')
@ApiConsumes('multipart/form-data')
@UseGuards(JwtAuthGuard, RoleGuard)
@Roles(Role.Admin)
@UseInterceptors(
FileInterceptor('image', {
limits: { fileSize: imgurConfig.fileSizeLimit },
}),
)
async createProductByAdmin(
@Body(
new ParseFormDataJsonPipe({ except: ['image', 'categoryIds'] }),
new ValidationPipe(),
)
createDto: CreateProductDto,
@UploadedFile() image: Express.Multer.File,
) {
console.log(`createDto`, createDto);
}

If you're looking to streamline your DTOs, consider leveraging the capabilities of the class-transformer library.

import { Transform, Type } from 'class-transformer';

1. When dealing with objects:

  @Transform(({ value }) => JSON.parse(value))
  name: { small:string, middle:string, big:string };
    

2. For handling numbers:

  @Type(() => Number)
  count number;

After facing a similar challenge for some time, I recently stumbled upon a solution that struck me as both simple and effective. Despite the age of this post, I wanted to share it in case it could assist someone else.

The approach involves creating an interceptor to extract a specific field from multipart formdata containing JSON, parsing it, and then assigning it to the request body. Assuming this field is named body, the interceptor would be structured like this:

@Injectable()
export class BodyInterceptor implements NestInterceptor {
  intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
    const request = context.switchToHttp().getRequest<Request>();

    try {
      const body = JSON.parse(request.body.body);
      request.body = body;
    } catch (err) {
      throw new BadRequestException(err.message);
    }

    return next.handle();
  }
}

I've enclosed the JSON.parse() code within a try/catch block to handle cases where invalid JSON syntax is passed, triggering an error akin to Nest's default response for such scenarios.

To implement this, you would simply call the interceptor after FileInterceptor:

@UseInterceptors(FilesInterceptor('files'), BodyInterceptor)

Subsequently, you can structure your body based on your DTO by utilizing @Body(). From my testing, this method appears to be functioning correctly, but please don't hesitate to notify me if otherwise. Wishing you success with implementing this solution.

If someone needs assistance, I recently encountered a similar issue involving sending a form with a file along with other data types such as dates and numbers.

Here are two ways to effectively handle validation:

• 1. Ensure you explicitly cast to string before setting the value in formData.

  for (let i in value) {
    formData.append(i, value[i] === null ? "" : value[i]);
  }
  

• 2. Use this transformation function:

  const transformDateFn = (params: TransformFnParams) =>
    params.obj[params.key] === "" || params.obj[params.key] === "null"
      ? null
      : params.value;
  

In addition:

    @Transform(transformDateFn)
    @IsOptional()
    @Type(() => Date)
    @IsDate()
    myFieldName: Date;

To break it down:

1. @Transform will alter the value

2. @IsOptional() will skip validation for null properties (remember to apply the ignore option in pipes first!)

 app.useGlobalPipes(
    new ValidationPipe({
      enableDebugMessages: true,
      skipNullProperties: true,
      transform: true,
      validationError: {
        value: true,
        target: true,
      },
   }),
 );

3. @Type will enforce correct type casting if the value is not null.

4. @IsDate allows validation to proceed.

That's all. Feel free to ask questions if needed.