Formdata & dto content upload | NestJS | Page 1

vernal island Dec 4, 2024, 12:50 PM

#

Hello,
I'm trying to upload a form with form-data. I have text, editor & file fields.
The idea would be you can attach a coverImage in the file field and the editor field can have images too. The issue I have the limit of the content field (editor field). Seems like 1MB, how can I increase this field?

  @ApiParam({ name: 'id', type: 'string' })
  @ApiBody({ type: UpdateAccommodationDto })
  @ApiConsumes('multipart/form-data')
  @UseInterceptors(FileInterceptor('file'))
  async updateAccommodation(
    @Param('id') id: string,
    @Body() accommodation: UpdateAccommodationDto,
    @UploadedFile() file: Express.Multer.File,
  ) {
    console.log('Received content size:', accommodation.content?.length);
    return await this.accommodationService.updateAccommodation(
      id,
      accommodation,
      file,
    );
  }```

export class UpdateAccommodationDto {
@ApiProperty({
required: false,
description: 'Content of the accommodation',
maxLength: 10485760,
})
@IsOptional()
@MaxFileSize(1e6)
content?: any;

@ApiProperty()
@IsOptional()
@IsString()
title?: string;

@ApiProperty({ type: Boolean })
@IsOptional()
@IsBoolean()
@Transform(({ value }) => value === 'true')
isActive?: boolean;
}

Error:

{
message: 'Field value too long',
error: 'Bad Request',
statusCode: 400
}


The frontend call is from a Nextjs server action. Everythings works when the content field don't is below 1MB

#

So in short, I have a text editor where I want to add some images too, but when I try to upload this content if reaching the length above 1MB it will give an error. How can I set this limit higher?

vernal island Dec 5, 2024, 1:15 PM

#

.

frank panther Dec 5, 2024, 4:24 PM

#

If I'm not mistaken, the second parameter of FileIpetrecptor can accept an options object, that is passed to multer. You should be able to set the size limit there

vernal island Dec 5, 2024, 6:22 PM

#

Thanks for reply, I will check it in a few minutes

#

Same issue 😦

exotic marsh Dec 5, 2024, 7:04 PM

#

As mentioned by @frank panther , in FileInterceptor method, the 2nd param is a MulterOptions. MulterOptions has a property "limits". It contains an objet with this property :
/** Max field value size (Default: 1MB) */
fieldSize?: number;

So this should resolve your problem :

@Post('')
@UseInterceptors(
FileInterceptor('fieldName', {
limits: {
fileSize: 2 * 1024 * 1024
},

vernal island Dec 5, 2024, 7:16 PM

#

  @Put(':id')
  @ApiParam({ name: 'id', type: 'string' })
  @ApiBody({ type: UpdateAccommodationDto })
  @ApiConsumes('multipart/form-data')
  @UseInterceptors(
    FileInterceptor('file'),
    FileInterceptor('content', {
      limits: {
        fieldSize: 10485760,
      },
    }),
  )
  async updateAccommodation(
    @Param('id') id: string,
    @Body() accommodation: UpdateAccommodationDto,
    @UploadedFile() file: Express.Multer.File,
  ) {
    return await this.accommodationService.updateAccommodation(
      id,
      accommodation,
      file,
    );
  }

#

import { ApiProperty } from '@nestjs/swagger';
import { Transform } from 'class-transformer';
import { IsBoolean, IsOptional, IsString } from 'class-validator';

export class UpdateAccommodationDto {
  @ApiProperty({
    required: false,
    description: 'Content of the accommodation',
    maxLength: 10485760,
  })
  @IsOptional()
  content?: string;

  @ApiProperty()
  @IsOptional()
  @IsString()
  title?: string;

  @ApiProperty({ type: Boolean })
  @IsOptional()
  @IsBoolean()
  @Transform(({ value }) => value === 'true')
  isActive?: boolean;
}

#

{
  message: 'Field value too long',
  error: 'Bad Request',
  statusCode: 400
}

vernal island Dec 5, 2024, 7:28 PM

#

exotic marsh As mentioned by <@646107453469229056> , in FileInterceptor method, the 2nd param...

The thing what I want to achieve is to have my content string limit higher, not the uploaded file size

wispy nacelle Dec 5, 2024, 7:40 PM

#

It's hard to understand exactly what you want to do, would it be to set a limit on the size of the file name?

#

I think you will need to prepare a presentation to explain it, at least I still haven't been able to understand it. And another thing, put a '''js CODE '" when you send the code to discord to format the MD of your code in color.

vernal island Dec 5, 2024, 10:07 PM

#

So, I have a form in frontend:
title,
content
image
That endpoint shown above is called with FormData (title, content, file)
The file is a file type

The main idea is to have some images in the content field (text editor, which can handle image upload... by default it handles images as base64 string), due to the images uploaded to this content field the size gets bigger by adding images to it and reach above 1MB and I get the error shown above

{
  message: 'Field value too long',
  error: 'Bad Request',
  statusCode: 400
}

#

wispy nacelle Dec 5, 2024, 10:13 PM

#

I see, so you just want to validate the field called "content" as a normal field like "username" or "password"

vernal island Dec 5, 2024, 10:14 PM

#

Yes, it's a html string

#

<p>
<a>..

wispy nacelle Dec 5, 2024, 10:14 PM

#

This field are receiving a base64 string ?

vernal island Dec 5, 2024, 10:16 PM

#

Just a second, I'll start the app and give a console log

wispy nacelle Dec 5, 2024, 10:17 PM

#

Well, what might be happening is the following, Nest uses express/fastify under the hood, so possibly what is blocking this is the body-parser, it has a default payload size limit, and since you are trying to send an entire page as value, it is a middleware and is blocking it.

#

https://github.com/nestjs/nest/issues/9427

GitHub

Allow to specify `limit` for json parser · Issue #9427 · nestjs/nest

Is there an existing issue that is already proposing this? I have searched the existing issues Is your feature request related to a problem? Please describe it Sometimes JSON request payload can be...

vernal island Dec 5, 2024, 10:20 PM

#

I saw this, but it is about json, I assumed this related to content-type json

#

i tried this but not worked

#

I'll try it tomorrow again

#

maybe I did something wrong

wispy nacelle Dec 5, 2024, 10:21 PM

#

Try this

MulterModule.registerAsync({
      useFactory: () => ({
        //...your config,
        limits: {
          fieldSize: parseInt(process.env.MAX_FIELD_SIZE), //default 1MB
          //in my case using limit file size and file number
          fileSize: parseInt(process.env.MAX_SIZE_PER_FILE_UPLOAD),
          files: parseInt(process.env.MAX_NUMBER_FILE_UPLOAD),
        },
      }),
    }),

vernal island Dec 5, 2024, 10:22 PM

#

Ok

wispy nacelle Dec 5, 2024, 10:25 PM

#

Well, good luck, you have to investigate further if none of this works, in your case it may be something related to default limits as I said but you have to investigate to find out more, I will leave the link to a repo where I make a testing app and send an image along with other fields in the body, then you can see if it helps in any way too.

exotic marsh Dec 5, 2024, 10:25 PM

#

Do you pass several files in ''editor" fields ? "The idea would be you can attach a coverImage in the file field and the editor field can have images too". If so you should use FileSInterceptor not FileInterceptor

wispy nacelle Dec 5, 2024, 10:25 PM

#

wispy nacelle Well, good luck, you have to investigate further if none of this works, in your ...

https://github.com/gabriel-logan/The-Rings-of-Power/blob/main/backend/src/ring/controllers/ring.controller.ts

GitHub

The-Rings-of-Power/backend/src/ring/controllers/ring.controller.ts ...

One Challenge to rule them all, One Challenge to find them, One Challenge to bring them all, and in the darkness bind them - gabriel-logan/The-Rings-of-Power

vernal island Dec 5, 2024, 10:27 PM

#

exotic marsh Do you pass several files in ''editor" fields ? "The idea would be you can attac...

Like this

vernal island Dec 5, 2024, 10:29 PM

#

wispy nacelle https://github.com/gabriel-logan/The-Rings-of-Power/blob/main/backend/src/ring/c...

The separate file upload works fine, but here I basically have an html string, where the image data is coded in <a href="base64">...

wispy nacelle Dec 5, 2024, 10:30 PM

#

Sorry, I really don't understand what you are doing 🫡

vernal island Dec 5, 2024, 10:30 PM

#

Like a blog post where you can have images inserted between text

wispy nacelle Dec 5, 2024, 10:31 PM

#

This ok, but why are you sending the images inside a html string ?

vernal island Dec 5, 2024, 10:32 PM

#

Default behaviour of react-quill library, but tomorrow I'll try to upload the images to an s3 and save only the link and that should resolve size problem

wispy nacelle Dec 5, 2024, 10:33 PM

#

I see. Ok, good luck then.

vernal island Dec 5, 2024, 10:34 PM

#

Thanks for your time and sorry for my bad explanation.

#Formdata & dto content upload