#22: upload license profile component to be reusable for uploading protobuf files

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.html

@@ -8,97 +8,16 @@
 </div>
 <mat-divider></mat-divider>
 <div style="display: flex; flex-direction: column; margin: 40px; width: 100%">
-  <div></div>
-  <mat-divider></mat-divider>
+  
   <div style="display: flex; flex-direction: column; width: 100%">
-    <mat-divider></mat-divider>
+    
     <!-- on boarding-->
     <div>
       <gp-headline
         [headlineTitle]="'ON-BOARD DOCKERIZED MODEL URI'"
       ></gp-headline>
     </div>
-    <!--process model-->
-    <div>
-      @if (solutionTrackId) {
-        <mat-list role="list" style="display: flex">
-          <mat-list-item role="listitem"
-            ><div style="display: flex; flex-direction: column">
-              <span
-                class="image-content micro-service-process-completed"
-                alt=""
-                title=""
-              ></span>
-
-              <span>Create solution</span>
-            </div></mat-list-item
-          >
-          <mat-list-item
-            ><span class="progress-status progress-status-completed"></span
-          ></mat-list-item>
-          <mat-list-item role="listitem"
-            ><div style="display: flex; flex-direction: column">
-              <span
-                class="image-content add-repository-completed"
-                alt="Add Artifacts"
-                title="Add Artifacts"
-              ></span>
-              <span>Add Artifacts </span>
-            </div></mat-list-item
-          >
-          <mat-list-item
-            ><span class="progress-status progress-status-completed"></span
-          ></mat-list-item>
-          <mat-list-item role="listitem"
-            ><div style="display: flex; flex-direction: column">
-              <span
-                class="image-content onboarded-completed"
-                alt="Onboarding status"
-                title="Onboarding status"
-              ></span>
-              <button>View model</button>
-              <span>Model is on-boarded and available in Private catalog </span>
-            </div></mat-list-item
-          >
-        </mat-list>
-      } @else {
-        <mat-list role="list" style="display: flex">
-          <mat-list-item role="listitem"
-            ><div style="display: flex; flex-direction: column">
-              <span class="image-content micro-service" alt="" title=""></span>
-
-              <span>Create solution</span>
-            </div></mat-list-item
-          >
-          <mat-list-item
-            ><span class="progress-status process-status-not-yet-started"></span
-          ></mat-list-item>
-          <mat-list-item role="listitem"
-            ><div style="display: flex; flex-direction: column">
-              <span
-                class="image-content add-repository"
-                alt="Add Artifacts"
-                title="Add Artifacts"
-              ></span>
-              <span>Add Artifacts </span>
-            </div></mat-list-item
-          >
-          <mat-list-item
-            ><span class="progress-status process-status-not-yet-started"></span
-          ></mat-list-item>
-          <mat-list-item role="listitem"
-            ><div style="display: flex; flex-direction: column">
-              <span
-                class="image-content not-yet-onboarded"
-                alt="Not yet on-boarded"
-                title="Not yet on-boarded"
-              ></span>
-              <span>Not yet on-boarded </span>
-            </div></mat-list-item
-          >
-        </mat-list>
-      }
-    </div>
+ 
     <div style="display: flex">
       <div style="display: flex; flex-direction: column; width: 100%">
         <!-- onboarding model form-->
@@ -154,6 +73,7 @@
           <div style="display: flex; flex-direction: column; width: 100%">
             <mat-label>Upload Protobuf File </mat-label>
             <div style="display: flex; width: 100%; gap: 10px">
+              
               <mat-form-field style="height: 70px">
                 <input matInput [value]="fileName" />
                 <mat-hint class="modal-note full-width no-padding">
@@ -175,7 +95,7 @@
                 style="height: 48px"
                 color="primary"
                 mat-raised-button
-                (click)="uploadFile()"
+                (click)="onClickUploadProtoBufFile()"
               >
                 Upload file
               </button>
@@ -183,13 +103,7 @@
             @if (message !== "") {
               <span class="modal-error">.proto file is required.</span>
             }
-            <!-- @if (
-              onboardingModelForm.controls["protobufFile"].errors?.[
-                "required"
-              ] && onboardingModelForm.controls["protobufFile"].touched
-            ) {
-              <span class="modal-error">.proto file is required.</span>
-            } -->
+         
           </div>
           <!--license profile-->
           <div style="display: flex; flex-direction: column">
@@ -200,21 +114,13 @@
               >Add License Profile</mat-checkbox
             >
 
-            <!--  <mat-radio-group color="primary">
-              <mat-radio-button value="auto" (click)="onCreateLicenseProfile()"
-                >Create license profile</mat-radio-button
-              >
-              <mat-radio-button
-                value="always"
-                (click)="onClickUploadLicenseProfile()"
-                >Upload license profile</mat-radio-button
-              >
-            </mat-radio-group> -->
+          
           </div>
           @if (
             onboardingModelForm.controls["addLicenseProfile"].value === true
           ) {
-            <gp-model-details-license-profile></gp-model-details-license-profile>
+            
+            <gp-model-details-license-profile [isExistingLicenseProfile]="false" ></gp-model-details-license-profile>
           }
 
           <div style="display: flex">
@@ -223,6 +129,7 @@
               mat-raised-button
               color="primary"
               [disabled]="!enableSubmit"
+              (click)="onClickBoardModel()"
             >
               On-board model
             </button>

src/app/features/dashboard/on-boarding-model/on-boarding-model.component.ts

@@ -29,6 +29,9 @@ import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.s
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
 import { Observable, Subject, Subscription, map, takeUntil } from 'rxjs';
 import { MatListModule } from '@angular/material/list';
+import { Router } from '@angular/router';
+import { ConfirmActionComponent } from 'src/app/shared/components/confirm-action/confirm-action.component';
+import { MessageStatusModel } from 'src/app/shared/models/message-status.model';
 
 @Component({
   selector: 'gp-on-boarding-model',
@@ -66,6 +69,8 @@ export class OnBoardingModelComponent implements OnInit {
   private onDestroy = new Subject<void>();
   private subscription: Subscription = new Subscription();
   modelLicense: LicenseProfileModel | null = null;
+  userId!: string;
+  messageStatuses!: MessageStatusModel[];
 
   constructor(
     private formBuilder: FormBuilder,
@@ -74,16 +79,15 @@ export class OnBoardingModelComponent implements OnInit {
     private alertService: AlertService,
     private privateCatalogsService: PrivateCatalogsService,
     private browserStorageService: BrowserStorageService,
+    private router: Router,
   ) {
     this.onboardingModelForm = this.formBuilder.group({
       name: [
         '',
         [
           Validators.required,
-          Validators.pattern('^(?=.*[a-z])[A-Za-z0-9]+[-.][A-Za-z0-9]+$'),
-          // this.notSameAsPublisher(this.publisherName),
+          Validators.pattern('^(?=.*[a-z])[a-z0-9]+[-.][a-z0-9]+$'),
         ],
-        // [],
       ],
       dockerURI: ['', [Validators.required]],
       protobufFile: [null, [Validators.required]],
@@ -118,6 +122,12 @@ export class OnBoardingModelComponent implements OnInit {
       .subscribe(() => {
         this.checkFormValidity();
       });
+
+    this.subscription.add(
+      this.browserStorageService.getUserDetails().subscribe((details) => {
+        this.userId = details?.userId ?? '';
+      }),
+    );
   }
 
   checkFormValidity() {
@@ -126,7 +136,7 @@ export class OnBoardingModelComponent implements OnInit {
     console.log({ protobufFile });
     if (!addLicenseProfile) {
       console.log('currentFile', this.currentFile);
-      this.enableSubmit = name && dockerURI && protobufFile;
+      this.enableSubmit = name && dockerURI && this.currentFile;
     } else {
       this.enableSubmit =
         name && dockerURI && this.currentFile && this.modelLicense;
@@ -231,6 +241,8 @@ export class OnBoardingModelComponent implements OnInit {
   resetData() {
     this.onboardingModelForm.reset();
     this.sharedDataService.licenseProfile = null;
+    this.currentFile = undefined;
+    this.fileName = 'No chosen file';
   }
 
   processEvent(event: any): void {
@@ -247,16 +259,87 @@ export class OnBoardingModelComponent implements OnInit {
     this.alertService.notify(alert, 5000);
   }
 
-  private handleUploadError(error: any) {
-    // Error handling logic here
-    this.modelUploadError = true;
-    if (error) {
-      this.modelUploadErrorMsg = [error];
-    } else if (error.error) {
-      const messageError = error.error.response_detail ?? error.error;
-      this.modelUploadErrorMsg = [messageError];
-    }
+  async onClickUploadProtoBufFile() {
+    const dialogRef: MatDialogRef<UploadLicenseProfileComponent> =
+      this.dialog.open(UploadLicenseProfileComponent, {
+        data: {
+          dataKey: {
+            title: 'Upload Protobuf File',
+            isEditMode: false,
+            isCheckExtension: true,
+            expectedExtension: 'proto',
+            errorMessage: '.proto file is required.',
+            supportedFileText: 'Supported files type: .proto',
+            action: (file: File) => {
+              this.currentFile = file;
+              this.fileName = file.name;
+              return this.privateCatalogsService.uploadProtoBufFile(file);
+            },
+            isLicenseProfile: false,
+            isProcessEvent: false,
+          },
+        },
+      });
+
+    dialogRef.afterClosed().subscribe((result) => {
+      // This will be executed when the dialog is closed
+      // Reload data to fetch the updated license profile
+      this.checkFormValidity();
+    });
+  }
+
+  async vieModel() {
+    this.router.navigate(['/dashboard/myModels']);
+  }
 
-    // Additional error handling
+  onClickBoardModel() {
+    if (this.enableSubmit) {
+      this.privateCatalogsService
+        .addCatalog(
+          this.userId,
+          this.onboardingModelForm.value.name,
+          this.onboardingModelForm.value.dockerURI,
+        )
+        .subscribe({
+          next: (res) => {
+            console.log({ res });
+            this.solutionTrackId = res;
+            const alert: Alert = {
+              message:
+                'On-boarding process has started and it will take a few seconds to reflect the change in status.',
+              type: AlertType.Info,
+            };
+            this.alertService.notify(alert, 5000);
+            this.privateCatalogsService
+              .getMessagingStatus(this.userId, this.solutionTrackId)
+              .subscribe({
+                next: (resp) => {
+                  console.log({ resp });
+                  this.messageStatuses = resp;
+                  if (resp) {
+                    const dialogRef: MatDialogRef<ConfirmActionComponent> =
+                      this.dialog.open(ConfirmActionComponent, {
+                        data: {
+                          dataKey: {
+                            title: 'View model',
+                            content: 'Model successfully onboarded',
+                            secondAction: 'View model',
+                            action: () => this.vieModel,
+                          },
+                        },
+                        autoFocus: false,
+                      });
+
+                    dialogRef.afterClosed().subscribe((result) => {
+                      this.resetData();
+                    });
+                  }
+                },
+                error: (error) => {},
+              });
+          },
+          error: (error) => {},
+        });
+    }
   }
 }

src/app/features/marketplace/marketplace.component.html

@@ -81,6 +81,7 @@
               [item]="item"
               [items]="publicSolutions"
               [isMarketPlacePage]="true"
+              [isPublishedSolution]="true"
               *ngFor="let item of publicSolutions"
             ></gp-list-item>
           </div>
@@ -91,6 +92,7 @@
               <mat-grid-tile *ngFor="let item of publicSolutions">
                 <div class="cards-container">
                   <gp-card-item
+                    [isPublishedSolution]="true"
                     [item]="item"
                     [items]="publicSolutions"
                     [isMarketPlacePage]="true"

src/app/shared/components/alert/alert.component.ts

@@ -24,6 +24,8 @@ export class AlertComponent {
         return 'error_outline';
       case AlertType.Success:
         return 'check_circle_outline';
+      case AlertType.Info:
+        return 'info_outline';
       default:
         return null;
     }

src/app/shared/components/home/home.component.ts

@@ -6,8 +6,6 @@ import { PublicSolutionsService } from '../../../core/services/public-solutions.
 import { CardItemComponent } from '../card-item/card-item.component';
 import { MatIconModule } from '@angular/material/icon';
 import { Router } from '@angular/router';
-import { MatDialog, MatDialogRef } from '@angular/material/dialog';
-import { UploadLicenseProfileComponent } from '../upload-license-profile/upload-license-profile.component';
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
 import { PublicSolution } from '../../models';
 import { Observable, Subscription, map, take } from 'rxjs';

src/app/shared/components/model-details-license-profile/model-details-license-profile.component.ts

-import { ChangeDetectorRef, Component, Input } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { SharedDataService } from 'src/app/core/services/shared-data/shared-data.service';
 import { PublicSolutionsService } from 'src/app/core/services/public-solutions.service';
 import { ActivatedRoute } from '@angular/router';
-import { Observable, Subscription, map } from 'rxjs';
+import { Observable, Subscription, map, throwError } from 'rxjs';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialog, MatDialogRef } from '@angular/material/dialog';
 import { CreateEditLicenseProfileComponent } from '../create-edit-license-profile/create-edit-license-profile.component';
 import { UploadLicenseProfileComponent } from '../upload-license-profile/upload-license-profile.component';
 import { BrowserStorageService } from 'src/app/core/services/storage/browser-storage.service';
 import { LicenseProfileModel } from '../../models';
+import { PrivateCatalogsService } from 'src/app/core/services/private-catalogs.service';
 
 @Component({
   selector: 'gp-model-details-license-profile',
@@ -18,7 +19,8 @@ import { LicenseProfileModel } from '../../models';
   templateUrl: './model-details-license-profile.component.html',
   styleUrl: './model-details-license-profile.component.scss',
 })
-export class ModelDetailsLicenseProfileComponent {
+export class ModelDetailsLicenseProfileComponent implements OnInit {
+  @Input() isExistingLicenseProfile: boolean = true;
   modelLicense: LicenseProfileModel | null = null;
   isLicenseFound = false;
   isLoadingLicense = true;
@@ -29,11 +31,16 @@ export class ModelDetailsLicenseProfileComponent {
   versionId: string = '';
   versionIdSubscription: Subscription | undefined;
   isUserIdAvailable$: Observable<boolean | undefined>;
+  userId$: Observable<string | undefined>;
+  userId!: string;
+
   private subscription: Subscription = new Subscription();
+  private destroy$: Subscription = new Subscription();
 
   constructor(
     private activatedRoute: ActivatedRoute,
     private publicSolutionsService: PublicSolutionsService,
+    private privateCatalogsService: PrivateCatalogsService,
     protected sharedDataService: SharedDataService,
     public dialog: MatDialog,
     private browserStorageService: BrowserStorageService,
@@ -42,6 +49,9 @@ export class ModelDetailsLicenseProfileComponent {
     this.isUserIdAvailable$ = this.browserStorageService
       .getUserDetails()
       .pipe(map((details) => !!details?.userId));
+    this.userId$ = this.browserStorageService
+      .getUserDetails()
+      .pipe(map((details) => details?.userId));
   }
 
   ngOnInit() {
@@ -58,6 +68,11 @@ export class ModelDetailsLicenseProfileComponent {
         }
       }),
     );
+    this.subscription.add(
+      this.browserStorageService.getUserDetails().subscribe((details) => {
+        this.userId = details?.userId ?? '';
+      }),
+    );
     this.activatedRoute.parent?.paramMap.subscribe((paramMap) => {
       this.solutionId = paramMap.get('solutionId') || '';
       this.revisionId = paramMap.get('revisionId') || '';
@@ -157,14 +172,39 @@ export class ModelDetailsLicenseProfileComponent {
     });
   }
 
+  uploadExistingLicenseFile(file: File): Observable<any> {
+    return this.privateCatalogsService.uploadExistingModelLicenseProfile(
+      this.userId,
+      this.solutionId,
+      this.revisionId,
+      this.versionId,
+      file,
+    );
+  }
+  uploadNewLicenseFile(file: File) {
+    return this.privateCatalogsService.uploadNewModelLicenseProfile(
+      this.userId,
+      file,
+    );
+  }
+
   onClickUpload() {
     const dialogRef: MatDialogRef<UploadLicenseProfileComponent> =
       this.dialog.open(UploadLicenseProfileComponent, {
         data: {
           dataKey: {
             isEditMode: false,
-            solutionId: this.solutionId,
-            revisionId: this.revisionId,
+            title: 'Upload License file',
+            errorMessage:
+              'Please update the license profile to correct the following validation errors:',
+            supportedFileText:
+              'Maximum file size: 1mb | Supported file type: .json',
+            action: (file: File) =>
+              this.isExistingLicenseProfile
+                ? this.uploadExistingLicenseFile(file)
+                : this.uploadNewLicenseFile(file),
+            isLicenseProfile: true,
+            isProcessEvent: true,
           },
         },
       });

src/app/shared/components/upload-license-profile/upload-license-profile.component.html

 <div class="dialog-header">
-  <h2 mat-dialog-title>Upload License file</h2>
+  <h2 mat-dialog-title>{{title}}</h2>
   <button
     type="button"
     mat-icon-button
@@ -59,6 +59,7 @@
               ></mat-progress-bar>
             </div>
             <div
+            
               style="
                 display: flex;
                 align-items: center;
@@ -81,15 +82,14 @@
     <div *ngIf="file && file.size / 1024 / 1024 > 1">
       <span>License file should be max size of 1MB.</span>
     </div>
-    <small>Maximum file size: 1mb | Supported file type: .json</small>
+    <small>{{supportedFileText}}</small>
 
     <div class="upload-error">
       <small *ngIf="modelUploadError">
-        <strong
-          >Please update the license profile to correct the following validation
-          errors:</strong
+        <strong *ngIf="errorMessage"
+          >{{errorMessage}}</strong
         >
-        <dl>
+        <dl *ngIf="!(modelUploadErrorMsg.length === 1 && modelUploadErrorMsg[0] === errorMessage )">
           <li *ngFor="let error of modelUploadErrorMsg">{{ error }}</li>
         </dl>
       </small>

src/app/shared/components/upload-license-profile/upload-license-profile.component.ts

@@ -9,7 +9,11 @@ import {
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatButtonModule } from '@angular/material/button';
-import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
+import {
+  MAT_DIALOG_DATA,
+  MatDialogModule,
+  MatDialogRef,
+} from '@angular/material/dialog';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
@@ -58,8 +62,6 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
   filename: string | null = null;
   progressBar = 0;
   modelUploadError: boolean = false;
-  @Input() solutionId: string = '';
-  @Input() revisionId: string = '';
   versionId: string = '';
   versionIdSubscription: Subscription | undefined;
   modelLicense!: LicenseProfileModel;
@@ -71,13 +73,23 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
   userId$: Observable<string | undefined>;
   licenseProfile!: LicenseProfileModel;
   private onDestroy = new Subject<void>();
+  alertSuccessMessage!: string;
+  alertErrorMessage!: string;
+  alertType!: AlertType;
+  isLicenseProfile!: boolean;
+  isCheckExtension!: boolean;
+  expectedExtension!: string;
+  errorMessage!: string;
+  supportedFileText!: string;
+  title!: string;
+  isProcessEvent!: boolean;
 
   constructor(
     private alertService: AlertService,
-    private privateCatalogsService: PrivateCatalogsService,
     private browserStorageService: BrowserStorageService,
     private sharedDataService: SharedDataService,
     @Inject(MAT_DIALOG_DATA) public data: any,
+    public dialogRef: MatDialogRef<UploadLicenseProfileComponent>,
   ) {
     this.userId$ = this.browserStorageService
       .getUserDetails()
@@ -94,9 +106,15 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
       this.versionIdSubscription.unsubscribe();
     }
   }
+
   ngOnInit(): void {
-    this.solutionId = this.data.dataKey.solutionId;
-    this.revisionId = this.data.dataKey.revisionId;
+    this.isLicenseProfile = this.data.dataKey.isLicenseProfile;
+    this.isCheckExtension = this.data.dataKey.isCheckExtension;
+    this.expectedExtension = this.data.dataKey.expectedExtension;
+    this.errorMessage = this.data.dataKey.errorMessage;
+    this.supportedFileText = this.data.dataKey.supportedFileText;
+    this.title = this.data.dataKey.title;
+    this.isProcessEvent = this.data.dataKey.isProcessEvent;
 
     // Get the initial version ID
     this.versionId = this.sharedDataService.versionId;
@@ -108,56 +126,23 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
       },
     );
   }
+  uploadFile(file: File) {
+    if (this.isCheckExtension) {
+      const fileExtension = this.getFilenameExtension(file.name);
+      if (fileExtension !== this.expectedExtension) {
+        this.handleUploadError(this.errorMessage);
 
-  uploadLicenseFile(): void {
-    event?.preventDefault();
-    combineLatest([this.userId$, of(this.file)])
-      .pipe(
-        filter(([userId, file]) => !!userId && !!file),
-        switchMap(([userId, file]) => {
-          if (
-            userId &&
-            file &&
-            this.versionId &&
-            this.solutionId &&
-            this.versionId
-          ) {
-            return this.privateCatalogsService.uploadExistingModelLicenseProfile(
-              userId,
-              this.solutionId,
-              this.revisionId,
-              this.versionId,
-              file,
-            );
-          } else if (
-            userId &&
-            file &&
-            !this.versionId &&
-            !this.solutionId &&
-            !this.versionId
-          ) {
-            return this.privateCatalogsService.uploadNewModelLicenseProfile(
-              userId,
-              file,
-            );
-          } else {
-            return throwError(() => new Error('Missing user ID or file'));
-          }
-        }),
-        takeUntil(this.onDestroy),
-        catchError((error) => {
-          console.error('Upload failed', error);
-          this.handleUploadError(error.error);
-          // Handle the error and continue
-          return of(null);
-        }),
-        finalize(() => this.resetProgress()),
-      )
-      .subscribe({
-        next: (event) => this.processEvent(event),
-        error: (error) => {}, // To catch any errors not caught by catchError
-        complete: () => {},
-      });
+        return; // Stop further execution
+      }
+    }
+    this.data.dataKey.action(file).subscribe({
+      next: (event: any) => {
+        this.processEvent(event);
+      },
+      error: (err: any) => {
+        this.handleUploadError(err);
+      },
+    });
   }
 
   processEvent(event: any): void {
@@ -165,29 +150,30 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
       this.progressBarValue = Math.round((100 * event.loaded) / event.total);
     } else if (event && event.type === HttpEventType.Response) {
       this.handleUploadSuccess(event.body);
-      this.sharedDataService.licenseProfile = this.licenseProfile;
+      if (this.isLicenseProfile)
+        this.sharedDataService.licenseProfile = this.licenseProfile;
     }
   }
 
   private handleUploadSuccess(response: any) {
     const alert: Alert = {
-      message: 'License uploaded successfully',
+      message: 'File uploaded successfully',
       type: AlertType.Success,
     };
     this.alertService.notify(alert, 5000);
+    this.dialogRef.close(true);
   }
 
   private handleUploadError(error: any) {
+    console.log({ error });
     // Error handling logic here
     this.modelUploadError = true;
-    if (error) {
-      this.modelUploadErrorMsg = [error];
-    } else if (error.error) {
+    if (error.error) {
       const messageError = error.error.response_detail ?? error.error;
       this.modelUploadErrorMsg = [messageError];
+    } else {
+      this.modelUploadErrorMsg = [error];
     }
-
-    // Additional error handling
   }
 
   // Function to reset progress
@@ -202,16 +188,17 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
 
   readFile(file: File) {
     const reader = new FileReader();
-    reader.onload = () => {
-      try {
-        this.licenseProfile = JSON.parse(reader.result as string);
-        console.log('License Profile Loaded:', this.licenseProfile);
-        // Proceed with any operations now that the license profile is loaded
-      } catch (e) {
-        console.error('Error parsing the license profile:', e);
-        // Handle errors in reading or parsing the file
-      }
-    };
+    if (this.isLicenseProfile)
+      reader.onload = () => {
+        try {
+          this.licenseProfile = JSON.parse(reader.result as string);
+          console.log('License Profile Loaded:', this.licenseProfile);
+          // Proceed with any operations now that the license profile is loaded
+        } catch (e) {
+          console.error('Error parsing the license profile:', e);
+          // Handle errors in reading or parsing the file
+        }
+      };
     reader.onerror = () => {
       console.error('Error reading the file:', reader.error);
     };
@@ -233,7 +220,7 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
       if (this.file.size / 1024 / 1024 < 1) {
         this.fileSize = Math.ceil(file.size / 1024);
       }
-      this.uploadLicenseFile();
+      this.uploadFile(this.file);
     }
   }
 
@@ -242,4 +229,17 @@ export class UploadLicenseProfileComponent implements OnInit, OnDestroy {
     this.modelUploadErrorMsg = [];
     this.modelUploadError = false;
   }
+
+  getFilenameExtension(filename: string): string {
+    // Split the filename by dot (.) and get the last element of the array
+    const parts = filename.split('.');
+    return parts[parts.length - 1];
+  }
+
+  idCheckExtensionValid(
+    fileExtension: string,
+    expectedExtension: string,
+  ): boolean {
+    return fileExtension === expectedExtension;
+  }
 }