ArrayBuffer when stringified becomes empty object

In my app, i'm uploading a file using FileReader and parsing it as an ArrayBuffer. The file properties are saved in an object, with structure like this:

file: {
    name: 'fileName', // type string
    content: ArrayBuffer // read like  FileReader.readAsArrayBuffer(uploadedFile)
}

When I want to save the file to backend, I'm using axios, and sending a request like this:

axios({
    url: "/api/v3/synchronous/commands",
    method: "POST",
    data: JSON.stringify(file),
    headers,
})

The problem is that when it get's stringifed, content inside file becomes an empty object {}. How to go about this issue, without having to convert ArrayBuffer to something else, and then converting it back to ArrayBuffer?