Pass Json Data in Backend H2 Db through Angular form

Question

I have created a end-point post service in spring boot which will consume json data through hibernate repository. Now i have created a form in angular with two fields, one will upload json file, I need to consume this file data in backend db tables, now I am not sure how to integrate these two? Sharing the codes:

• UI:

  PROJECT Project Name

       <div class="form-group">
           <div class="textOnInput">
               <label for="path">Upload Project </label><br />
  
               <div class="inputBtnSection">
  
                   <input id="path" class="disableInputField" name="path" formControlName="path" />
  
  
                   <label class="fileUpload">
                       <input id="uploadBtn" type="file" class="upload" (change)="onChange($event)"
                           accept=".json" />
                   </label>
               </div>
  
           </div>
       </div>
       <div class="buttons">
           <button type="button" class="cancel" (click)="onCancel()" data-bs-dismiss="modal">Cancel</button>
           <button type="button" class="submit" [disabled]="!projectForm.valid"
               (click)="onSubmit(projectForm)">Submit</button>
       </div>
  
   </form>
  

• TS file

    import { Component, OnInit } from '@angular/core';
    import { FormControl, FormGroup, Validators } from '@angular/forms';
    import { MatDialog, MatDialogRef } from '@angular/material/dialog';
    
    @Component({
      selector: 'app-create-project',
      templateUrl: './create-project.component.html',
      styleUrls: ['./create-project.component.css']
    })
    export class CreateProjectComponent implements OnInit,AfterViewInit {
    
      projectForm = new FormGroup({
        projName: new FormControl('', [Validators.required, Validators.minLength(4), Validators.maxLength(50)]),
        path: new FormControl('')
      })
      prjNameErrMsg = "";
      public userFile: any = File;
      projname: any;
      editable: boolean = false;
      postService: any;
      projectName: string;
      constructor( public dialogRef: MatDialogRef<CreateProjectComponent>,public matDialog: MatDialog) { }
      }
      ngOnInit(): void {
      }
      
      get projName() {
        return this.projectForm.get('projName');
      }
      
      
      onCancel(): void {
        this.projectForm.reset();
      
      }
      
      onSubmit(projectFormForm: FormGroup)  {
        const formData: FormData = new FormData();
        formData.append("fileContent", this.projectForm.value);
        this.projectName = (<HTMLInputElement>(
          document.getElementById("name")
        )).value;
        formData.append("projName", this.projectName);
        this.postService.postRequest("/createproject", formData).subscribe();
      }
      onChange(event: any): void {
        const file = event.target.files[0];
        this.userFile=file;
        this.projectForm.get("path")?.setValue(event.target.value);
      }
    } 

"/createproject" is end-point where consume logic to save data in tables is written.

How to correct TS file functions to correctly communicate with backend end-point?