Progress bar upload with angular and express - node.js

Question

I'm trying to build a file uploader with a progress bar. I found angular's way of listening to progress events (reportProgress) as simple and useful when it comes to the documentation. But I had trouble implementing it in my project. For some reason when I upload the image the progress shows 100% as soon as the request is sent and doesn't show real progress.
My service.ts
public upload(file) {
const formData = new FormData();
formData.append('file', file);
return this.http.post<any>(`${config.apiUrl}/articles/image-upload`, formData, {
reportProgress: true,
observe: 'events'
}).pipe(map((event) => {
switch (event.type) {
case HttpEventType.UploadProgress:
const progress = Math.round(100 * event.loaded / event.total);
return { status: 'progress', message: progress };
case HttpEventType.Response:
return event.body;
default:
return `Unhandled event: ${event.type}`;
}
})
);
}
And in my component
addImg() {
this.articlesService.upload(this.file).subscribe(
(res) => console.log(res),
(err) => console.log(err)
);
}
When it comes to the backend I'm using multer-s3 to upload files to aws clouds with express server.
const upload = multer({
storage: multerS3({
s3,
contentLength: 500000000,
bucket: 'bucketss',
acl: 'public-read',
metadata: function (req, file, cb) {
cb(null, {fieldName: 'TESTING_META_DATA!'});
},
key: function (req, file, cb) {
cb(null, Date.now().toString() + randtoken.uid(16))
}
})
})
const singleUpload = upload.single('file');
router.post('/image-upload', async (req, res) =>{
await singleUpload(req, res, function(err) {
if (err) {
console.log(err)
return res.status(422).send({errors: [{title: 'File Upload Error', detail: err.message}] });
}
return res.json({'imageUrl': req.file.location});
});
});