Unable To Retrieve Posted Form and File Data From Angular To Symfony

Question

I am trying to do a basic image upload using angular and symfony.

we have our basic form

<div class="form-group">
  <input type="file" #fileUpload (change)="selectFile()"/>
</div>

Its typescript counterpart......

import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
import {ApiService} from "../../services/api.service";
import {ApiResponseInterface} from "../../interfaces/apiResponse.interface";
import {HttpClient, HttpHeaders} from "@angular/common/http";


@Component({
  selector: 'app-tester',
  templateUrl: './tester.component.html',
  styleUrls: ['./tester.component.scss']
})
export class TesterComponent implements OnInit {

  @ViewChild("fileUpload",{static: false}) fileUpload: ElementRef;

  constructor(private api: ApiService, private http: HttpClient) { }

  ngOnInit() {
  }

  selectFile(){

    console.log(this.fileUpload.nativeElement.files)


    const fileList: FileList = this.fileUpload.nativeElement.files;

    const theFile: File = fileList[0];


    let formData = new FormData();
    formData.append('file',theFile,theFile.name);
    formData.append('something','test');



    this.http.post('http://api.admireme.vip.local:8080/tester',formData).subscribe((resp:any)=>{

    });


  }

}

Which sends the form data to our TestController

<?php

namespace App\Controller;


use Symfony\Component\HttpFoundation\JsonResponse;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\Routing\Annotation\Route;


/**
 * Class TestController
 * @package App\Controller
 */
class TestController extends BaseController{

      /**
       * @Route("/tester", name="testerRoute")
       * @param Request $request
       * @return JsonResponse
       */
      public function tester(Request $request) : JsonResponse{


            return $this->json([
                'other'=>$request->get('something'),
                'files'=>$request->files->get('file')
            ]);

      }

}

So we can select a file all well and good. but when Im trying to grab the data, like i've done a hundred times before its unable to grab the data.

however it IS sending it in a way that im unfamiliar with.

REQUEST PAYLOAD--->

------WebKitFormBoundary3i9AnjOpWTHJspwt
Content-Disposition: form-data; name="file"; filename="DSC_0359.jpg"
Content-Type: image/jpeg


------WebKitFormBoundary3i9AnjOpWTHJspwt
Content-Disposition: form-data; name="something"

test
------WebKitFormBoundary3i9AnjOpWTHJspwt--

and the response is....

{"other":null,"files":null}

What can I do to make this data usable? I've not seen this before