تحميل الملفات في Angular: كيفية إرسال ملف إلى الخادم بشكل صحيح مع شريط التقدم؟

مرحباً بالجميع! أنا مبتدئ في Angular (الإصدار 15) و TypeScript، ولا أستطيع فهم تحميل الملفات. أحتاج إلى إنشاء نموذج حيث يختار المستخدم ملفاً (صورة أو PDF)، ثم يرسله إلى الخادم مع عرض تقدم التحميل. حاولت استخدام FormData العادي، ولكن هناك خطأ ما. إليك الكود الحالي للمكون:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Component({
  selector: 'app-upload',
  template: `
    <input type="file" (change)="onFileSelected($event)">
    <button (click)="onUpload()">تحميل</button>
  `
})
export class UploadComponent {
  selectedFile: File | null = null;

  constructor(private http: HttpClient) {}

  onFileSelected(event: any) {
    this.selectedFile = event.target.files[0];
  }

  onUpload() {
    const formData = new FormData();
    formData.append('file', this.selectedFile!);
    this.http.post('/api/upload