I have a Next.JS API Route that uploads an MP3 file to AWS S3 and simultaneously referencing that file in a FaunaDB Collection. However, the MP3 file, when accessed via S3 is not playable, even when downloaded.

The problem is evident when I attempt to console.log(audioFile) in the API route, it returns undefined, which means that I might not be passing the file to S3 in the correct format.

In the ReactJS component, onClick() submits the file to an an eventHandler called submitVoiceMemo:

  const submitVoiceMemo = async () => {
    console.log('this is the payload', audioFile)

    try {
      await fetch('/api/createVoiceMemo', {
        method: 'PUT',
        headers: {
          'Content-Type': 'audio/mpeg'
        },
        body: audioFile
      })
    } catch (error) {
      console.error(error)
    }
  }

As you can see, I am printing audioFile to check that that is indeed the correct payload. audioFile stores the MP3 in a useState hook, (the console confirms that it is an MP3 file).

In my API route however:

    const { audioFile } = req.body

    console.log('This is the req.body', audioFile)

...I receive undefined for audioFile. If I console.log(req.body), I receive what looks like a stream of characters denoting an MP3 upon the console.

How should I be parsing the MP3 file?