How to capture object File sent with fetch in a Symfony Driver

I have the following code where you asicronically sent an object file .. This is the function with which I capture the File object

handleChangeAudio: (event) => {
            var arrayAudio = event.target.files;
            function readerFiles(files){
                let fileRead = null
                 for (var i = 0, f; f = files[i]; i++) {
                 var reader = new FileReader();  
                 reader.onload = (function(theFile) {
                      return function(e) {
                        dispatch(uploadAudioBackend(e.target.result))
                      };
                    })(f);

                    // Read in the image file as a data URL.
                  reader.readAsDataURL(f);
               }  
              }

This is the fetch function with which I call the Symfony driver and send him the data ..

return fetch('/api/upload', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({arrayAudio:arrayAudio})
        })         

This is the symfony driver with which I capture the data sent from the client ..

/**
     * @Route("/api/upload", name="api_upload")
     */
    public function apiUploadAction(Request $request)
    {
        $em = $this->getDoctrine()->getManager();

        $contentAudioUpload = $request->getContent();
        $parametersAsArrayAudio = json_decode($contentAudioUpload);

        $arrayAudioUploads = $parametersAsArrayAudio->{'arrayAudio'};

        $filename = uniqid().".".$arrayAudioUploads->getClientOriginalExtension();

        $serializer = $this->get('serializer');
        return new JsonResponse($serializer->normalize(1) );
    }

and it gives me the following error ...

  

Call to a member function getClientOriginalExtension () on string