Angular - Call to a member function getClientOriginalExtension() on null {"exception":"[object] (Error(code: 0) in Laravel API

Question

I have a setup project using Angular-12 as frontend and Laravel-8 as backend. I want to store company details with the Logo. The logo name should be stored in the DB field called company_logo, while the logo (image) itself goes into a directory folder.

Laravel Backend Controller:

public function register(StoreCompanySetupRequest $request)
{
        $arr_company = [
            'name'                              => $request->companyName,
            'registration_number'               => $request->registrationNumber,
        ];

         if ($request->company_logo != "") {
             $company_logo = $request->file('company_logo');
             $new_name = rand() . '.' . $company_logo->getClientOriginalExtension();
             $company_logo->move(public_path('storage/images/company_logo'), $new_name);
             $arr_company['company_logo'] = $new_name;
        }
        $newCompany = Company::create($arr_company);
}

Angular:

component:

    export class SignupCompanyComponent implements OnInit {
      isLinear = true;
      isLoading = false;
      companySetupForm!: FormGroup;
      companyForm!: FormGroup;
      idForm!: FormGroup;
      imageSrcLogo!: string | ArrayBuffer;

  onFileChange(event: any) {
    const reader = new FileReader();

    if(event.target.files && event.target.files.length) {
      const [file] = event.target.files;
      reader.readAsDataURL(file);

     reader.onload = () => {
        this.imageSrcLogo = reader.result as string;

        this.companyInfoForm.patchValue({
          fileSource: reader.result
        });
      };

    }
  }

      ngOnInit() {
        this.companyForm = this.fb.group({
          companyName: ['', [Validators.required, Validators.minLength(3), Validators.maxLength(100)]],
      company_logo: ['',
      [
        RxwebValidators.extension({
          extensions: ["jpg","jpeg","bmp","png","gif","svg"]
        })
      ]],
        },
    { updateOn: "blur" });
        this.idForm = this.fb.group({
          registrationNumber: ['', [Validators.required, Validators.maxLength(100)]],
        });
      }

      get fc() {
        return this.companyForm.controls;
      };
      get fi() {
        return this.idForm.controls;
      };

  onSubmit() {
    this.isSubmitted = true;

    const formCompanyData = this.companyForm.getRawValue();
    const formIdData = this.idForm.getRawValue();

    const data = {
      companyName: formCompanyData.companyName,
      company_logo: formCompanyData.company_logo,
      registrationNumber: formCompanyData.registrationNumber,
    };

    this.spinnerService.show();
    const header = {
      'Content-Type': 'application/json'
    };

    this.isLoading = true;
    return this.api.post('companies/company/signup', data, header)
      .pipe(first())
      .subscribe(
        data => {
          this.tokenHandler(data);
        });
  }
}

HTML:

<mat-horizontal-stepper [linear]="isLinear" #stepper labelPosition="bottom">
  <mat-step [stepControl]="companyForm">
    <form [formGroup]="companyForm">
      <ng-template matStepLabel matStepperIcon="phone">Company Info</ng-template>

      <div class="col-md-4">
        <div class="card card-primary card-outline">
          <div class="card-body box-profile">
            <div class="text-center">
              <img class="profile-user-img img-fluid img-circle" [src]="imageSrcLogo || 'assets/img/no-image.png'" alt="No Company Logo" style="height:150px; width:150px">
            </div>

            <h3 class="profile-username text-center">Company Logo</h3>

            <div class="form-group">
              <label for="file"></label>
              <input formControlName="company_logo" id="file" type="file" class="form-control" (change)="onFileChange($event)">
            </div>
          </div>
        </div>
      </div>

      <div class="col-12 col-md-8">
        <div class="form-group">
          <label for="name">Company Name:<span style="color:red;">*</span></label>}
          <input type="text" formControlName="companyName" placeholder="Company Name" class="form-control" required/>
        </div>
        <div *ngIf="fc.companyName.touched && fc.companyName.invalid">
          <div *ngIf="fc.companyName.hasError('required')">
            <div class="text-danger">
              Company Name is required!
            </div>
          </div>
          <div *ngIf="fc.companyName.hasError('minlength')">
            <div class="text-danger">
              Company Name cannot be less than 3 characters!
            </div>
          </div>
          <div *ngIf="fc.companyName.hasError('maxlength')">
            <div class="text-danger">
              Company Name cannot be more than 100 characters!
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <button mat-raised-button color="primary" matStepperNext [disabled]="companyForm.status != 'VALID'">Next</button>
      </div>
    </form>
  </mat-step>
  <mat-step [stepControl]="idForm">
    <form [formGroup]="idForm">
      <ng-template matStepLabel>Company ID</ng-template>
      <div class="col-12 col-md-12">
        <div class="form-group">
          <label for="registration_number">Registration Number:<span style="color:red;">*</span></label>
          <input type="text" formControlName="registrationNumber" placeholder="Registration Number" class="form-control" required/>
        </div>
        <div *ngIf="fi.registrationNumber.touched && fi.registrationNumber.invalid">
          <div *ngIf="fi.registrationNumber.hasError('required')">
            <div class="text-danger">
              Company Reg. No. is required!
            </div>
          </div>
          <div *ngIf="fi.registrationNumber.hasError('maxlength')">
            <div class="text-danger">
              Company Reg. No. cannot be more than 100 characters!
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <button mat-raised-button color="black" matStepperPrevious>Back</button> &nbsp;
        <button mat-raised-button color="success" [disabled]="isLoading" type="submit" (click)="onSubmit()">
                    <span *ngIf="isLoading" class="spinner-border spinner-border-sm mr-1"></span>
                      Submit
                  </button> &nbsp;
        <button mat-raised-button color="warn" (click)="stepper.reset()">Reset</button>
      </div>
  </mat-step>
</mat-horizontal-stepper>

When I submitted, nothing was saved into the DB.

I did console.log(data) in submit and got this response:

{companyName: "ssasa", : registrationNumber: "sasaas", company_logo: "C:\\fakepath\\token.PNG", …}
companyName: "ssasa"
registrationNumber: "sasaas"
company_logo: "C:\\fakepath\\token.PNG"

Then when I checked the laravel.log, I got this:

local.ERROR: Call to a member function getClientOriginalExtension() on null {"exception":"[object] (Error(code: 0)

and it points to this line:

$new_name = rand() . '.' . $company_logo->getClientOriginalExtension();

How do I get this resolved?

Thanks