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
[https://docs.nestjs.com/techniques/file-upload][Read this your required type is here]
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