how can i show file upload time with progress bar

Hello i have a angular project and one page i'm exporting datas to pdf.

but datas exporting as an image so it can be very long time. I find a progress bar which i can use it. what should i do,can you help me ?

here my controller code

var user = await GetCurrentUserAsync();
      var chartProduct = await _chartsRepository.GetChartsDetail(id, user.Id);

            Document doc = new Document(PageSize.A4); // pdf dosyasını oluşturduk
      string dosya = _hostingEnvironment.WebRootPath + $@"\pdfs\" + "KartelaDetay.pdf"; // dosya yolunu ve ismini belirledik
      PdfWriter writer = PdfWriter.GetInstance(doc, new FileStream(dosya, FileMode.Create));

      string imagePath = _hostingEnvironment.WebRootPath + $@"\images\" + "kesimcilerlogo.png";
      string bgImageFilePath = _hostingEnvironment.WebRootPath + $@"\images\" + "pdfBackground.jpg";

      iTextSharp.text.Image jpg = iTextSharp.text.Image.GetInstance(bgImageFilePath);
      jpg.ScaleToFit(3000, 770);
      jpg.Alignment = iTextSharp.text.Image.UNDERLYING;
      jpg.SetAbsolutePosition(7, 69);
      writer.PageEvent = new ImageBackgroundHelper(jpg);


      doc.Open(); // dosya işlemlerini açtık

      doc.Add(jpg);
      Image gif = Image.GetInstance(imagePath);

      gif.ScalePercent(2.4f);
      doc.Add(gif);

      // güncel tarih paragrafı ekledik
      Paragraph pGetDate = new Paragraph(DateTime.Now.ToShortDateString() + " " + DateTime.Now.ToShortTimeString());
      pGetDate.Font.Size = 10;
      pGetDate.Alignment = Element.ALIGN_RIGHT;
      pGetDate.SpacingBefore = 10;
      doc.Add(pGetDate);
      //--//

      // başlık paragrafı ekledik
      Paragraph pTitle = new Paragraph("Kartela Detay");
      pTitle.Font.Size = 15;
      pTitle.Alignment = Element.ALIGN_CENTER;
      pTitle.SpacingAfter = 30;
      doc.Add(pTitle);
      //--//

      PdfPTable table = new PdfPTable(7); // kolon sayısını söyledik
      table.TotalWidth = 570f; // uzunluk
      table.LockedWidth = true; // belirledğimiz width değerine kitledik
                                // kolon isimlerini söyledik
      AddCell(table, "No");
      AddCell(table, "Resim");
      AddCell(table, "Renk Grubu Kodu");
      AddCell(table, "Renk Grubu");
      AddCell(table, "Renk Kodu");
      AddCell(table, "Renk Adı");
      AddCell(table, "Ölçüler");
      //--//

      string dimension = "";
      foreach (var item in chartProduct)
      {
        dimension = "";
        table.AddCell(item.Id.ToString());


                    string imgColorPath = _hostingEnvironment.WebRootPath + $@"\images\product\" + item.ImageUrl;
                if(System.IO.File.Exists(imgColorPath) == true)
                {
                    Image imgvt = Image.GetInstance(imgColorPath);
                    imgvt.ScaleAbsolute(50f, 50f);
                    PdfPCell imageCell = new PdfPCell(imgvt);
                    imageCell.PaddingTop = 10f;
                    imageCell.PaddingBottom = 10f;
                    imageCell.HorizontalAlignment = Element.ALIGN_CENTER;
                    table.AddCell(imageCell);
                }
                else
                {
                    AddCell(table, "Resim Bulunamadı");
                }


                AddCell(table, item.Material.Code);
        AddCell(table, item.Material.Name);
        AddCell(table, item.Code);
        AddCell(table, item.Name);
        foreach (var dimensions in item.Dimensions)
        {
          string deger = dimensions.Height + "*" + dimensions.Width + " " + dimensions.Kind + " " +
                         dimensions.Thickness;
          dimension += deger + "\n\n";
        }
        AddCell(table, dimension);
      }

      doc.Add(table); // tabloyu dökümana ekledik

      doc.Close();  // dökümman işlemlerini sonlandırdık
      return Ok(true);

here is my service code

 pdfExport = (id: number): Observable<any> => {
        return this.http.post(this.configuration.Server + "PdfExport/" + id, { headers: this.headers });
    }

my component code

 pdfExport() {
        this.chartService.pdfExport(this.id).subscribe(
            () => {
              var url = 'pdfs/KartelaDetay.pdf';
                window.open(url);
            },
            () => {
                alert("PDF EXPORT İŞLEMİNDE BİR HATA MEYDANA GELDİ");
            }
        )
    }

my progress bar

<div class="progress">
    <div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" [attr.aria-valuenow]="progress" aria-valuemin="0" aria-valuemax="100"
         style="min-width: 2em;" [style.width]="(progress/100)*100 + '%'">
        {{progress}}%
    </div>
</div>

if you help me, i would be grateful,thanks