Image showing null in angular while putting post request

This is my html file - however, all my values including name, id, quantity, and description are being posted in the database and even I'm able to upload images using Postman also:

<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<nav class="navbar nav-color">
  <div class="container-fluid">
    <div class="navbar-header">
      <h4 class="navbar-brand">Add a New Product</h4>
    </div>
  </div>
</nav>

<div class="container master">
  <div class="heading">
    <h3>Create a new product</h3>
  </div>
  <h4>
    <form [formGroup]="form" (ngSubmit)="onSubmit()">
      <div class="forms">
        <div class="form1">
          <label>Enter Factory ID<span class="text-danger">*</span></label>
          <input
            type="text"
            class="form-control"
            placeholder="Factory ID"
            formControlName="identity"
            required
          />
          <small class="form-text text-danger"> ID is required</small>

          <div>
            <label>Name</label>
            <input
              type="text"
              class="form-control"
              placeholder="Name"
              formControlName="name"
            />
          </div>
          <label>Quantity</label>
          <input
            type="text"
            class="form-control"
            placeholder="Quantity"
            formControlName="quantity"
          />
        </div>
      </div>
      <div class="form2">
        <label for="file">Description</label>
        <input
          type="text"
          class="form-control form2 input"
          placeholder="Description"
          formControlName="description"
        />
      </div>
      <div class="Image">
        <label for="file">Select Image</label>
        <input
          formControlName="file"
          type="file"
          class="form-control"
          accept="image/*"
          (change)="onFileChange($event)"
        />
      </div>
      <button class="btn btn-primary" type="submit">Submit</button>
    </form>
  </h4>
</div>

To upload the file or image in the database, we are using the FormData object. The FormData interface provides a way to easily construct a set of key/value pairs describing form fields and their values. After that, we used formData.append() method to inject the values retrieved from the Reactive form.

Next, we use the HTTP POST method to send the user data to the server. We passed the two arguments in the POST method; first, we passed the REST API route, and the second argument is the fromData created with FormData object.

import { Component, OnInit } from '@angular/core';
import { ServiceService } from 'src/app/service.service';
import {  Router } from '@angular/router';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-newproduct',
  templateUrl: './newproduct.component.html',
  styleUrls: ['./newproduct.component.css']
})
export class NewproductComponent implements OnInit {
  redirect:any="";
  form: FormGroup;
  
  

  constructor(private api:ServiceService, private router:Router ,private fb:FormBuilder) {
    this.form = this.fb.group({
      identity: ['', [Validators.required]],
      name: [''],
      quantity: [''],
      description: [''],
      file: [''],
      fileSource:[null],
    });
  }
  get f() {
    return this.form.controls;
  }

  onFileChange(event:any) {
    if (event.target.files.length > 0) {
      const file = event.target.files[0];
      this.form.patchValue({
        fileSource: file
         // in console logged this file here it it showing my image being uploaded in the file
      });
    };
  }
  
  onSubmit() {
    const formData = new FormData();
    formData.append('file', this.form.get('fileSource').value);
    formData.append('identity', this.form.get('identity').value);
    formData.append('name', this.form.get('name').value);
    formData.append('quantity', this.form.get('quantity').value);
    formData.append('description', this.form.get('description').value);
    console.log(formData)

    this.api.addnewProducts(formData).subscribe(res=>{
      console.log(res)
    })
  }

  ngOnInit(): void {
    this.redirect=this.api.receiveFactories();
  }
}

This is my service file:

import { HttpClient } from '@angular/common/http';
import {  Injectable } from '@angular/core';
import { Subject, Observable,tap } from 'rxjs';
import { Company } from './companies/company.model';
import { Product } from './product/product.model';

@Injectable({
  providedIn: 'root'
})
export class ServiceService {
  factories : string;
  products : string;
  editProduct : string;
  baseurl = 'http://127.0.0.1:8000';
  Refreshrequired: any;

  constructor(private http: HttpClient) {}

  getAllCompanies(): Observable<any> {
        return this.http.get<Company>(this.baseurl+'/factories/')
  }

  getAllProducts(id: any): Observable<any> {
        return this.http.get<Product>(this.baseurl+'/factories/'+id)
  }

  editProducts(id:any,updatedBody:any): Observable<any> {
      return this.http.put(this.baseurl+'/products/'+id,updatedBody);
  }

  addnewProducts(body:any): Observable<any> {
      return this.http.post(this.baseurl+'/products/', body);
  }

  deleteProducts(id:any): Observable<any> {
      return this.http.delete(this.baseurl+'/products/'+id);
  }

  sendFactories(data:any) {
    this.factories = data;
  }
 
  receiveFactories() {
    return this.factories;
  }

  sendProducts(data1:any) {
    this.products = data1;
  }

  receiveProducts() {
    return this.products;
  }

  setEditProduct(data2:any) {
    this.editProduct = data2;
    console.log(this.editProduct);
  }

  getEditProduct() {
    return this.editProduct;
  }
}