The Angular application has a form with a file (image) upload that needs to be saved in a folder on the node.js server. But for some reason this does not work, the folder where the images should be saved has been created, but the images are not saved there. There are no errors in the console
My form in dashboard.component.html file
<form action="setProfileImage" method="post" enctype="multipart/form-data">
<input hidden="true" type="file" name="filedata" id="file-input" (change)="onFileSelected($event)">
<label for="file-input">
<div mat-raised-button class="btn" class="userInfo__addFoto">
<p>Upload Image</p>
</div>
</label>
</form>
dashboard.component.ts
import { Component, OnInit } from '@angular/core';
import { AuthService } from '../auth.service';
@Component({
selector: 'app-dashboard',
templateUrl: './dashboard.component.html',
styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {
selectedFile!: File;
constructor(
private authService: AuthService,
) { }
ngOnInit(): void {}
onFileSelected(event: any) {
this.selectedFile = <File>event.target.files[0];
const formData = new FormData();
formData.append('filedata',this.selectedFile);
console.log(formData);
this.authService.setImage(formData);
}
}
Function in auth.service.ts
setImage(data: any) {
return this.http.post('http://localhost:3000/account/setProfileImage',
data);
}
Part of the code responsible for this functionality on the node.js server
const upload = multer({dest:"uploads"});
router.post('/setProfileImage', upload.single("filedata"), (req, res) => {
filedata = req.file;
console.log(filedata);
if(!filedata)
res.send("Ошибка при загрузке файла");
else
res.send("Файл загружен");
});