Using FormData breaks backend validations because everything is being sent as a string

Recently we had to implement an attachment component in our application. In order to send files to backend, we relied on FormData.

Previously we were making calls to backend like this:

axios({
  url: Url.to(path),
  method: method,
  responseType: "json",
  data: {
     id: 1,
     properties: {
        name: "Test"
     }
  }
})

However, it doesn't support sending files. So we changed it to look like this:

const formData = new FormData();

formData.append("attachment", file);
// more of them

axios({
  url: Url.to(path),
  method: method,
  responseType: "json",
  data: formData
})

In the first example, we were getting the JSON as-is. In the second example, we get everything converted to string because FormData doesn't support anything except strings.

{
    id: "1",
    properties: "[Object]",
    ...
}

and it breaks our whole structure because our validations expect a number as id and object as properties, not a string "[Object]".

Is there any way to add files into the first option? I can also use an alternative to FormData if there is a more sane way.

Thank you.

via Aris