skip to Main Content

I am trying to implement image upload in my project. If I add single image it is working properly. But In multiple image fields getting error as

{
    "message": "Unexpected field",
    "error": "Bad Request",
    "statusCode": 400
}
 @Post('personal-details')
  @UseInterceptors(
    FileInterceptor('image_front', {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-front-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
    FileInterceptor('image_back', {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-back-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
    FileInterceptor('profile_image', {
      storage: diskStorage({
        destination: './uploads/user',
        filename: (req, file, cb) => {
          const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
          const extension = file.originalname.split('.').pop();
          cb(null, `img-profile-${uniqueSuffix}.${extension}`);
        },
      }),
    }),
  )
  async studentPersonalData(
    @Body('email') email: string,
    @Body() personalDetailsDto: personalDetailsDto,
    @UploadedFile() imageFront,
    @UploadedFile() imageBack,
    @UploadedFile() profileImage,
  ) {
    try {
      const imageFrontFilename = imageFront ? imageFront.filename : null;
      const imageBackFilename = imageBack ? imageBack.filename : null;
      const profileImageFilename = profileImage ? profileImage.filename : null;
      
      console.log('Image front filename:', imageFrontFilename);
      console.log('Image back filename:', imageBackFilename);
      console.log('Profile image filename:', profileImageFilename);
      console.log('Email:', email);
      console.log('Personal details:', personalDetailsDto);
  
      
      const result = await this.userService.dataPersonalDet(email, {
        ...personalDetailsDto,
        image_front: imageFrontFilename,
        image_back: imageBackFilename,
        profile_image: profileImageFilename,
      });
  
      return result;
    } catch (error) {
      console.error("Error processing personal data:", error);
      throw new BadRequestException("Failed to process personal data");
    }
  }
  

This was the code. I am learning nestjs and please help.

I am trying to add images using nestjs. Like other fields I want to add images also. I am using mysql.

2

Answers


  1. [https://docs.nestjs.com/techniques/file-upload][Read this your required type is here]

    Login or Signup to reply.
  2. Rather than using multiple interceptors, you should use the FileFieldsInterceptor. This allows for multiple files to be sent under different fields, like you’re looking to do. That would look something like

    @Post('personal-details')
      @UseInterceptors(
        FileInterceptor([
          {
            name: 'image_front',
            maxCount: 1,
          },
          {
            name: 'image_back',
            maxCount: 1,
          },
          {
            name: 'profile_image',
            maxCount: 1,
          },
          ], {
          storage: diskStorage({
            destination: './uploads/user',
            filename: (req, file, cb) => {
              const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1e9);
              const extension = file.originalname.split('.').pop();
              cb(null, `img-front-${uniqueSuffix}.${extension}`);
            },
          }),
        }),
      )
      async studentPersonalData(
        @Body('email') email: string,
        @Body() personalDetailsDto: personalDetailsDto,
        @UploadedFiles() {
          image_front: imageFront,
          image_back: imageBack,
          profile_image: profileImage
        }: { 
          image_front: Express.Multer.File[];
          image_back: Express.Multer.File;
          profile_image: Express.Multer.File[]
        }
      ) {
        ...
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search