Upload image and Json from Angular to Multer/Express - node.js

Question

I would like to upload an image and a json to a server using Express and Multer.
When I test with Postman there is no problem but when I test with the Front-end in Angular, it seems that the image isn't sent.
Here are the codes :
problem-form.component.html
<div class="problemContainer">
<div class="problemForm">
<h2>Soumission de problème</h2>
<form [formGroup]="form" (ngSubmit)="submitForm()">
<p>
<mat-form-field class="inputFW">
<input matInput formControlName="User" placeholder="Adresse email">
<mat-error>This field is required</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field class="inputFW">
<input matInput value="{{machineName}}" placeholder="Nom de la machine" disabled>
<mat-error>Le nom de la machine est requis</mat-error>
</mat-form-field>
</p>
<p>
<mat-form-field class="inputFW">
<textarea matInput placeholder="Description du problème (max 200 caractères)" formControlName="Description" rows="3"></textarea>
</mat-form-field>
</p>
<p>
<label>Image (Optionnel)</label><br><br>
<input type="file" (change)="fileChange($event)" name="image" />
</p>
<button mat-raised-button color="primary">Envoyer</button>
</form>
</div>
function in the component that call the service
submitForm(){
if(this.form.valid){
let obj = this.form.value
obj.image = this.image
this.service.createProblem(obj).subscribe(data => console.log(data), err => {console.log(err)})
}else{
console.log("erreur")
}
}
function in the service that post to the server
createProblem(problem: Object){
console.log('roman')
let form = new FormData()
form.append('Name', problem['Name'])
form.append('Description', problem['Description'])
form.append('User', problem['User'])
form.append('image', problem['image'])
console.log(problem['image'])
return this.http.post(getUrl()+ `problems`, form);
}
Configuration of multer
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'images')
},
filename: function (req, file, cb) {
cb(null, 'problem_' + Date.now()+'.'+mime.extension(file.mimetype))
}
})
let upload = multer({ storage: storage });
The route that call a function in the controller
router.route('/')
/** GET /api/problems - Get list of Problems */
.get(pbCtrl.list)
/** POST /api/problem - create a new problem */
.post(/*validate(paramValidation.problem), */upload.single('image'), pbCtrl.create);
The function in the controller
function create(req, res, next) {
let photo
if(req.file != null)
photo = req.file.filename
PC.findOne({ Name: req.body.Name, Active: true }, { '_id': 0 }).exec()
.then((pc) => {
if (pc == null)
return res.sendStatus(400)
const newPc = new PC({
Name: pc.Name,
Local: pc.Local,
IP: pc.IP,
MAC: pc.MAC,
Comment: pc.Comment,
Active: pc.Active,
Problem: { User: req.body.User, Description: req.body.Description, Image: photo }
})
newPc.save()
.then(savedPC => {
res.json(savedPC);
//return next();
}).catch(e => { next(e); });;
})
.catch((err) => {
console.log(err)
res.sendStatus(400)
})
}
Thanks all

Answer 1

Resolved
function to load file
fileChange($event) {
let reader = new FileReader();
if($event.target.files && $event.target.files.length > 0) {
let file = $event.target.files[0];
this.file = file
}
}
function that submit the form
submitForm(){
if(this.form.valid){
let obj = this.form.value
obj.image = this.file
this.service.createProblem(obj).subscribe(data => this.openSnackBar('Votre demande a bien été enregistrée'), err => {console.log(err)})
}else{
console.log("erreur")
}
}
function in the service to post
createProblem(problem: Object){
let form = new FormData()
form.append('Name', problem['Name'])
form.append('Description', problem['Description'])
form.append('User', problem['User'])
form.append('image', problem['image'])
return this.http.post(getUrl()+ `problems`, form).map((res) => {
return res.json()
});
}