File Upload not showing in swagger (Nest JS)

I have implemented a file upload function along other data , wanted to try out the api in swagger but it does not show the file upload modal.
My controller file is as follows :

@UseInterceptors(FileInterceptor('file'))
  @Put()
  @ApiOperation({
    summary: 'Endpoint used to update values in the checklist Template',
  })
  @HttpCode(HttpStatus.OK)
  async updateChecklistTemplate(
    @Body() setFieldValueDto: UpdateChecklistValueDto,
    @UploadedFile() file: Express.Multer.File,
    @Request() req,
    
  ) {
    return await this.checklistTemplatesService.setFieldValue(
      setFieldValueDto,
      req.user.id,
      file,
    );
  }
 

My DTO file :

import {
  IsArray,
  IsBoolean,
  IsMongoId,
  IsNotEmpty,
  IsOptional,
  IsString,
} from 'class-validator';
import { ApiProperty } from '@nestjs/swagger';
export class UpdateChecklistValueDto {
  @ApiProperty()
  @IsString()
  @IsNotEmpty()
  @IsMongoId()
  readonly id: string;

  @ApiProperty()
  @IsBoolean()
  @IsNotEmpty()
  readonly isImage: boolean;

  @ApiProperty()
  @IsString()
  @IsNotEmpty()
  readonly entity: string;

  @ApiProperty()
  @IsString()
  @IsNotEmpty()
  readonly value: string;

  @ApiProperty({ type: 'string', format: 'binary', required: true })
  file: Express.Multer.File;
}

I am kind of new to this, appreciate it if you could point out anything missing here.
Thank you so much in advance

You need to use @ApiConsumes and @ApiBody decorators. See the NestJS documentation for File uploads. Your case might look something like this but please also check the swagger docs to customise based on your specific requirements

import { ApiBody, ApiConsumes } from '@nestjs/swagger';
...
@UseInterceptors(FileInterceptor('file'))
@Put()
@ApiOperation({
  summary: 'Endpoint used to update values in the checklist Template',
})
@ApiConsumes('multipart/form-data')
@ApiBody({
  schema: {
    type: 'object',
    properties: {
      file: {      <----- matches the string in FileInterceptor('file')
        type: 'string',
        format: 'binary',
      },
    },
  },
})
@HttpCode(HttpStatus.OK)
async updateChecklistTemplate(

The nestjs docs suggest usage like this:

@ApiBody({
  description: 'List of cats',
  type: FileUploadDto,
})

// Where FileUploadDto is defined as follows:

class FileUploadDto {
  @ApiProperty({ type: 'string', format: 'binary', required: true })
  file: any;
}

// Your case
export class UpdateChecklistValueDto extends FileUploadDto {
...
}

With this many decorators for one route, you could create a custom decorator to handle the file upload like so:

const ApiFile =
  (fileName: string = 'file'): MethodDecorator =>
  (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
    ApiBody({
      schema: {
        type: 'object',
        properties: {
          [fileName]: {
            type: 'string',
            format: 'binary',
            required: true,
          },
        },
      },
    })(target, propertyKey, descriptor);
  };

export function SingleFile(fileName?: string) {
  return applyDecorators(
    ApiConsumes('multipart/form-data'),
    ApiFile(fileName),
    UseInterceptors(FileInterceptor('file')),
  );
}

// Your controller route
@SingleFile()
@Put()
@ApiOperation({
  summary: 'Endpoint used to update values in the checklist Template',
})
@HttpCode(HttpStatus.OK)
async updateChecklistTemplate(