Uploading files in Angular: how to properly send a file to the server with a progress bar?

Hello everyone! I'm new to Angular (version 15) and TypeScript, and I can't figure out file uploading. I need to create a form where the user selects a file (image or PDF), and then sends it to the server with upload progress display.\n\nI tried using regular FormData, but something goes wrong. Here's my current component code:\n\n

import { Component } from '@angular/core';\nimport { HttpClient } from '@angular/common/http';\n\n@Component({\n  selector: 'app-upload',\n  template: `\n    <input type="file" (change)="onFileSelected($event)">\n    <button (click)="onUpload()">Upload</button>\n  `\n})\nexport class UploadComponent {\n  selectedFile: File | null = null;\n\n  constructor(private http: HttpClient) {}\n\n  onFileSelected(event