worked on upload loading progress bar

angular/src/app/patients/all-patients/all-patients.component.html

@@ -92,9 +92,14 @@
                         <div class="field">
                             <label for="image">Profile Image</label>
                             <input type="file" id="image" name="image" accept=".jpg,.png"
-                                (change)="profileimageupload($event)" />
+                                (change)="profileimageupload($event)"/>
                         </div>
                         <small *ngIf="error !== ''" class="p-error">{{error}}</small>
+                        <!-- Progress Bar -->
+                        <div *ngIf="uploadProgress > 0">
+                            <p>Uploading... {{ uploadProgress }}%</p>
+                            <progress [value]="uploadProgress" max="100"></progress>
+                        </div>
                         <small *ngIf="imgpath !== ''">{{imgpath}} <i class="pi pi-image"></i></small>
                     </div>
 

angular/src/app/patients/all-patients/all-patients.component.ts

@@ -1,6 +1,6 @@
 import { PermissionService } from '@abp/ng.core';
 import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
-import { HttpClient } from '@angular/common/http';
+import { HttpClient, HttpEventType, HttpParams, HttpRequest } from '@angular/common/http';
 import { Component, OnInit } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
@@ -8,6 +8,7 @@ import { PagingSortPatientResultDto } from '@proxy/dto';
 import { Gender, Status } from '@proxy/global-enum';
 import { PatientService } from '@proxy/patients';
 import { PatientDto, CreateUpdatePatientDto } from '@proxy/patients/dto';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-all-patients',
@@ -38,18 +39,7 @@ export class AllPatientsComponent implements OnInit {
   error: string = '';
   imgpath: string = '';
   guid: string = '00000000-0000-0000-0000-000000000000';
-  options: Partial<Confirmation.Options> = {
+  uploadProgress = 0;
-    hideCancelBtn: false,
-    hideYesBtn: false,
-    dismissible: false,
-    cancelText: 'Close',
-    // yesText: 'Confirm',
-    messageLocalizationParams: ['Demo'],
-    titleLocalizationParams: [],
-    // You can customize icon
-    // icon: 'fa fa-exclamation-triangle', // or
-    // iconTemplate : '<img src="custom-image-path.jpg" alt=""/>'
-  };
 
   constructor(
     private patientService: PatientService,
@@ -103,6 +93,7 @@ export class AllPatientsComponent implements OnInit {
     this.imgpath = '';
     this.selectedgender = 0;
     this.selectedstatus = 0;
+    this.uploadProgress = 0;
   }
 
   loadPatient(event: any) {
@@ -174,14 +165,41 @@ export class AllPatientsComponent implements OnInit {
       formdata.append('file', input.files[0]);
       this.UploadFileData(tag, formdata);
     } else {
+      this.uploadProgress = 0;
       return;
     }
   }
 
+
   UploadFileData(tag: string, formdata: FormData) {
-    this.patientService.uploadFile(tag, formdata).subscribe(result => {
+    // this.patientService.uploadFile(tag, formdata).subscribe(result => {
-      this.selectedPatient.imageID = result;
+    //   this.selectedPatient.imageID = result;
-    });
+    // });
+    const req = new HttpRequest(
+      'POST',
+      environment.apis.default.url + '/api/app/patient/upload-file',
+      formdata,
+      {
+        reportProgress: true,
+        responseType: 'text',
+        params: new HttpParams().set('tagName', tag),
+      }
+    );
+    this.http.request(req).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.uploadProgress = Math.round((event.loaded / event.total!) * 100);
+          console.log(event.type, this.uploadProgress);
+        } else if (event.type === HttpEventType.Response) {
+          this.uploadProgress = 100;
+          this.selectedPatient.imageID = event.body.toString();
+        }
+      },
+      error => {
+        console.error('Upload failed', error);
+        this.uploadProgress = 0;
+      }
+    );
   }
 
   editPatient(Patient: any) {

angular/src/app/patients/patient-record/patient-record.component.html

@@ -83,8 +83,8 @@
     <ng-template pTemplate="header">
       <tr>
         <th class="hidden" pSortableColumn="id">Patient ID <p-sortIcon field="id" /></th>
-        <th pSortableColumn="fullName">Full Name <p-sortIcon field="fullName" /></th>
+        <th>Full Name</th>
-        <th pSortableColumn="gender">Gender <p-sortIcon field="fullName" /></th>
+        <th>Gender</th>
         <th pSortableColumn="dateOfAdmission">Date of Admission <p-sortIcon field="dateOfAdmission" /></th>
         <th pSortableColumn="diagnosis">Diagnosis <p-sortIcon field="diagnosis" /></th>
         <th>Lab Reports</th>
@@ -194,7 +194,11 @@
             <div class="field">
               <label for="labReport">Lab Report</label>
               <input type="file" id="labReport" name="labReport" accept=".pdf,.doc,.docx"
-                (change)="handleLabReportUpload($event)" />
+                (change)="handleUpload($event,'Lab-Report')" />
+            </div>
+            <div *ngIf="uploadProgress > 0">
+              <p>Uploading... {{ uploadProgress }}%</p>
+              <progress [value]="uploadProgress" max="100"></progress>
           </div>
             <small *ngIf="labReportUrlpath !==''">{{labReportUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
           </div>
@@ -202,7 +206,11 @@
             <div class="field">
               <label for="medications">Medications</label>
               <input type="file" id="medications" name="medications" accept=".pdf,.doc,.docx"
-                (change)="handleMedicationsUpload($event)" />
+                (change)="handleUpload($event,'Medication')" />
+            </div>
+            <div *ngIf="uploadProgress > 0">
+              <p>Uploading... {{ uploadProgress }}%</p>
+              <progress [value]="uploadProgress" max="100"></progress>
           </div>
             <small *ngIf="medicationUrlpath !==''">{{medicationUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
           </div>
@@ -213,9 +221,14 @@
             <div class="field">
               <label for="medicationHistory">Medication History</label>
               <input type="file" id="medicationHistory" name="medicationHistory" accept=".pdf,.doc,.docx"
-                (change)="handleMedicationHistoryUpload($event)" />
+                (change)="handleUpload($event,'Medication-History')" />
             </div>
-            <small *ngIf="medicationHistoryUrlpath !==''">{{medicationHistoryUrlpath}} <i class="pi pi-file-pdf pdf-icon"></i></small>
+            <div *ngIf="uploadProgress > 0">
+              <p>Uploading... {{ uploadProgress }}%</p>
+              <progress [value]="uploadProgress" max="100"></progress>
+          </div>
+            <small *ngIf="medicationHistoryUrlpath !==''">{{medicationHistoryUrlpath}} <i
+                class="pi pi-file-pdf pdf-icon"></i></small>
           </div>
           <div class="p-col-6">
             <div class="field">

angular/src/app/patients/patient-record/patient-record.component.ts

@@ -8,6 +8,7 @@ import { PermissionService } from '@abp/ng.core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { environment } from 'src/environments/environment';
 import { Confirmation, ConfirmationService, ToasterService } from '@abp/ng.theme.shared';
+import { HttpClient, HttpEventType, HttpParams, HttpRequest } from '@angular/common/http';
 
 @Component({
   selector: 'app-patient-record',
@@ -40,18 +41,7 @@ export class PatientRecordComponent implements OnInit {
   medicationHistoryUrlpath: string;
   medicationUrlpath: string;
   guid: string = '00000000-0000-0000-0000-000000000000';
-  options: Partial<Confirmation.Options> = {
+  uploadProgress = 0;
-    hideCancelBtn: false,
-    hideYesBtn: false,
-    dismissible: false,
-    cancelText: 'Close',
-    yesText: 'Confirm',
-    messageLocalizationParams: ['Demo'],
-    titleLocalizationParams: [],
-    // You can customize icon
-    // icon: 'fa fa-exclamation-triangle', // or
-    // iconTemplate : '<img src="custom-image-path.jpg" alt=""/>'
-  };
 
   constructor(
     private patientService: PatientService,
@@ -59,7 +49,8 @@ export class PatientRecordComponent implements OnInit {
     private permissionChecker: PermissionService,
     private toaster: ToasterService,
     private route: ActivatedRoute,
-    private router: Router
+    private router: Router,
+    private http: HttpClient
   ) {}
 
   ngOnInit() {
@@ -122,7 +113,6 @@ export class PatientRecordComponent implements OnInit {
     });
     this.patientService.getPatientRecordList(this.params, id).subscribe(data => {
       this.patientrecords = data.items;
-      // console.log(data.items);
       this.totalRecords = data.totalCount;
       this.loading = false;
     });
@@ -201,50 +191,97 @@ export class PatientRecordComponent implements OnInit {
       });
   }
 
-  handleLabReportUpload(event: Event): void {
+  handleUpload(event: Event, tag: string): void {
     const input = event.target as HTMLInputElement;
-    if (input && input.files) {
+    if (input.files.length > 0) {
-      const tag = 'Lab-Report';
       const formdata = new FormData();
       formdata.append('file', input.files[0]);
       this.UploadFileData(tag, formdata);
+    } else {
+      this.uploadProgress = 0;
+      return;
     }
   }
 
-  handleMedicationsUpload(event: any): void {
+  // handleLabReportUpload(event: Event): void {
-    const input = event.target as HTMLInputElement;
+  //   const input = event.target as HTMLInputElement;
-    if (input && input.files) {
+  //   if (input && input.files) {
-      const tag = 'Medication';
+  //     const tag = 'Lab-Report';
-      const formdata = new FormData();
+  //     const formdata = new FormData();
-      formdata.append('file', input.files[0]);
+  //     formdata.append('file', input.files[0]);
-      this.UploadFileData(tag, formdata);
+  //     this.UploadFileData(tag, formdata);
-    }
+  //   }
-  }
+  // }
 
-  handleMedicationHistoryUpload(event: any): void {
+  // handleMedicationsUpload(event: any): void {
-    const input = event.target as HTMLInputElement;
+  //   const input = event.target as HTMLInputElement;
-    if (input && input.files) {
+  //   if (input && input.files) {
-      const tag = 'Medication-History';
+  //     const tag = 'Medication';
-      const formdata = new FormData();
+  //     const formdata = new FormData();
-      formdata.append('file', input.files[0]);
+  //     formdata.append('file', input.files[0]);
-      this.UploadFileData(tag, formdata);
+  //     this.UploadFileData(tag, formdata);
-    }
+  //   }
-  }
+  // }
+
+  // handleMedicationHistoryUpload(event: any): void {
+  //   const input = event.target as HTMLInputElement;
+  //   if (input && input.files) {
+  //     const tag = 'Medication-History';
+  //     const formdata = new FormData();
+  //     formdata.append('file', input.files[0]);
+  //     this.UploadFileData(tag, formdata);
+  //   }
+  // }
 
   UploadFileData(tag: string, formdata: FormData) {
-    this.patientService.uploadFile(tag, formdata).subscribe(result => {
+    // this.patientService.uploadFile(tag, formdata).subscribe(result => {
+    //   switch (tag) {
+    //     case 'Lab-Report':
+    //       this.selectedPatient.labReportUrlID = result;
+    //       break;
+    //     case 'Medication':
+    //       this.selectedPatient.medicationUrlID = result;
+    //       break;
+    //     case 'Medication-History':
+    //       this.selectedPatient.medicationHistoryUrlID = result;
+    //       break;
+    //   }
+    // });
+    const req = new HttpRequest(
+      'POST',
+      environment.apis.default.url + '/api/app/patient/upload-file',
+      formdata,
+      {
+        reportProgress: true,
+        responseType: 'text',
+        params: new HttpParams().set('tagName', tag),
+      }
+    );
+    this.http.request(req).subscribe(
+      event => {
+        if (event.type === HttpEventType.UploadProgress) {
+          this.uploadProgress = Math.round((event.loaded / event.total!) * 100);
+          console.log(event.type, this.uploadProgress);
+        } else if (event.type === HttpEventType.Response) {
+          this.uploadProgress = 100;
           switch (tag) {
             case 'Lab-Report':
-          this.selectedPatient.labReportUrlID = result;
+              this.selectedPatient.labReportUrlID = event.body.toString();
               break;
             case 'Medication':
-          this.selectedPatient.medicationUrlID = result;
+              this.selectedPatient.medicationUrlID = event.body.toString();
               break;
             case 'Medication-History':
-          this.selectedPatient.medicationHistoryUrlID = result;
+              this.selectedPatient.medicationHistoryUrlID = event.body.toString();
               break;
           }
-    });
+        }
+      },
+      error => {
+        console.error('Upload failed', error);
+        this.uploadProgress = 0;
+      }
+    );
   }
 
   savePatient(form: NgForm) {