uploading and retrieving image using angular php mysql

Question

im working on a angular php project and im working on admin view where he will be able to add image of the project and i want to save the url in the database so i can show it in the client side how can i do that ?

this is my html code snippet for the image

<div class="row">
                    <div class="col-md-6 div">Image <span style="color:red;">* </span> </div>
                    <div class="col-md-6">
                        <input id="imageInput" type="file" class="form-control" formControlName="image_url"
                            name="image_url" accept="image/*" required="" (change)="setPhoto($event)">
                    </div>
                </div>

and this is my ts file

import { ElementRef, OnInit, ViewChild } from '@angular/core';
import { Component } from '@angular/core';
import { ApiService } from '../service/api.service';
import { Router } from '@angular/router';
import { FormArray, FormBuilder, FormControl, Validators, AbstractControl, ValidationErrors } from '@angular/forms';
import { ToastrService } from 'ngx-toastr';
import { countries } from '../countries_data';

import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-addprojects',
  templateUrl: './addprojects.component.html',
  styleUrls: ['./addprojects.component.css']
})

export class AddprojectsComponent implements OnInit {
  addForm: any;
  projectCategories: any[] | undefined;

  imageUrl = null;
  photo?: Blob;


  public countries: any = countries
  selectedFile: any;
  constructor(
    private formbuilder: FormBuilder,
    private router: Router,
    private projectservice: ApiService,
    private toastr: ToastrService
  ) {
    this.addForm = this.formbuilder.group({
      // project_id: ['', [Validators.required, Validators.min(1), Validators.pattern("^[0-9]+$")]],
      title: ['', [Validators.required, Validators.maxLength(255), Validators.pattern("^[a-zA-Z]+$")]],
      description: ['', [Validators.required, Validators.maxLength(255), Validators.pattern("^[a-zA-Z]+$")]],
      start_date: ['', [Validators.required]],
      end_date: ['', [Validators.required]],
      code_cat: ['', [Validators.required, Validators.min(1), Validators.pattern("^[0-9]+$")]],
      project_country: ['', [Validators.required,]],
      project_holder: ['', Validators.required],
      image_url: ['', Validators.required]

    },
      { validator: this.endDateValidator }

    )
  }
  endDateValidator(group: AbstractControl): ValidationErrors | null {
    const startDate = group.get('start_date')?.value;
    const endDate = group.get('end_date')?.value;

    if (startDate && endDate && startDate > endDate) {

      return { endDateInvalid: true };
    }
    return null;
  }

  setPhoto(event: any) {
    if (event.target.files && event.target.files.length > 0) {
      this.photo = event.target.files[0];
    }
  }
  onSubmit() {
    if (this.addForm.valid && this.photo) {

      const formData = new FormData();
      formData.append('image_url', this.photo);
      console.log(formData)

      this.projectservice.createProjects(this.addForm.value).subscribe({
        next: (data: any) => {
          this.toastr.success('Project created successfully', 'Success');
          setTimeout(() => {
            this.router.navigate(['/view']);
          }, 1500);


        },
        error: (error: any) => {
          console.log(error);
          this.toastr.error('Project ID exists already', 'Error');
        }
      });
    }
    else {
      this.toastr.error('Please Fill the form correctly ', 'Error');
    }
  }


  get id() {
    return this.addForm.get('project_id')
  }

  ngOnInit() {
    this.projectservice.getCategory().subscribe(
      (result: any) => {
        this.projectCategories = result.data;
        console.log(this.projectCategories);
      },
      error => {
        // Handle error
      }
    );


  }


}

and this is my service

 createProjects(project: FormData) {

let headers = new HttpHeaders({
  'Content-Type': 'application/json'
});
// let data = JSON.stringify(project);
// console.log(project)
console.log(project)
return this.http.post(this.baseUrl + 'addproject.php', project, { headers });

}

im just now trying to get the image in the formdata and it gives me null everytime in the console.log