file uploading gives file name undefined in Mean stack - node.js

Question

i'm trying to upload imae and store it in mongoDb. so far i have defined image String attribute in nodejs model. But it gives below error.
so here is my server side controller.
noticeController.js
const express = require('express');
const router = express.Router();
const multer = require('multer');
const notice = require('../models/notices');
const storage = multer.diskStorage({
destination :"./public/uploads/",
filename: (req,file,callBack) => {
callBack(null,file.fieldname+"_"+Date.now()+path.extname(file.originalname));
}
});
const upload = multer({
storage : storage
}).single('image');
/add notice
router.post('/notice/add',upload,(req,res,next)=>{
let newNotice = new notice({
title : req.body.title,
description : req.body.description,
image : req.file.filename
});
newNotice.save((err,notice)=>{
if(err){
res.json({msg : 'Failed to add notice' });
}
else{
res.json({ msg : 'Notice added Successfully'});
let socketio = req.app.get('socketio');
socketio.sockets.emit('notice.created', newNotice);
}
});
});
//update notice
router.put('/notice/update/:id',upload,(req,res,next)=>{
let newNotice = new notice({
title : req.body.title,
description : req.body.description,
image : req.file.filename
});
notice.findByIdAndUpdate({_id : req.params.id},{$set:req.body},(err,notice)=>{
if(err){
res.json({msg : 'Failed to update notice' });
}
else{
res.json({ msg : 'Notice updated Successfully'});
}
});
});
module.exports =router;
and here is the client side ts.
notice.component.ts
import {Component, Input, OnChanges, OnInit, SimpleChanges} from '#angular/core';
import {FormControl, FormGroup, Validators} from "#angular/forms";
import {MatStepper} from "#angular/material/stepper";
import {Notice} from "../../shared/models/notice";
import {NoticeService} from "../../core/services/notice.service";
import {SnackBarComponent} from "../../shared/popup-modals/snack-bar/snack-bar.component";
#Component({
selector: 'app-notice',
templateUrl: './notice.component.html',
styleUrls: ['./notice.component.css'],
providers : [NoticeService]
})
export class NoticeComponent implements OnInit, OnChanges {
#Input('objectId') selectedObjectId : string;
public imageString: String;
isEdit : boolean = false;
socket;
uploading: boolean = false;
notice: Notice = {
title: '',
description:'',
image:''
};
notices: Notice[];
finalNoticeList: Notice[] = [];
noticeForm = new FormGroup({
image: new FormControl(),
title: new FormControl('', [Validators.required]),
description: new FormControl('', [Validators.required]),
});
constructor(private noticeService: NoticeService, private customPopup : SnackBarComponent) {
}
ngOnInit(): void {
this.getNoticeList();
}
ngOnChanges(changes: SimpleChanges): void {
console.log("hello");
console.log("check "+ this.selectedObjectId);
this.getNotice(this.selectedObjectId);
this.noticeForm.disable();
}
deleteNotice(id: any) {
this.noticeService.deleteNotice(id).subscribe(data => {
this.getNoticeList();
});
}
addNotice(){
let newNotice = new Notice();
newNotice.title = this.noticeForm.controls.title.value;
newNotice.description = this.noticeForm.controls.description.value;
newNotice.image = this.noticeForm.controls.image.value;
if(this.isEdit){
this.noticeService.updateNotice(this.selectedObjectId,newNotice).subscribe(notice=>{
this.customPopup.openSnackBar("Notice Updated Successfully!","warning")
this.getNoticeList();
},error => {
console.log(error);
});
this.isEdit = false;
}
else{
this.noticeService.addNotices(newNotice).subscribe(notice=>{
this.customPopup.openSnackBar("Notice Saved Successfully!","success")
this.getNoticeList();
},error => {
console.log(error);
});
}
this.noticeForm.disable();
}
setToEdit(){
this.noticeForm.enable();
this.isEdit =true;
}
setFormData(){
console.log("title "+ this.notice.title);
this.noticeForm.controls.title.setValue(this.notice.title);
this.noticeForm.controls.description.setValue(this.notice.description);
}
getNoticeList() {
this.noticeService.getNotices()
.subscribe(notices => {
this.notices = notices;
this.finalNoticeList = notices;
});
}
getNotice(id:string){
this.noticeService.getNotice(id)
.subscribe(notice => {
this.noticeForm.controls.title.setValue(notice.title);
this.noticeForm.controls.description.setValue(notice.description);
});
}
setState(){
this.noticeForm.disable();
this.isEdit = false;
}
}
html part
<input type='file' formControlName="image" id="image" />
I'm using mutler package. I search thruogh google for an answe. But I couldn't find it. So where did I do wrong?

Answer 1

The provided name attribute in your html must match the string you pass to the multer call. So you should change your html to:
<input type='file' formControlName="image" name="image" id="image" />