How to send data in api without losing it

Question

Below code i'm adding objects to media array in reactJS

const formData = new FormData()
formData.append('file', file, file.name)
const obj = {
  'id': id,
  'type': 'doc',
  'data': formData,
  url: file
};
setID(id + 1);
setMedia([...media, obj]);

Now i send it to api via axios

function addNew() {
  setProgressing(true)
  axios.post(uri + '/api/add', {
      map_id: props.data.id,
      questions: JSON.stringify(media)
    })
    .then(res => {
      props.updateStep();
    })
    .catch(err => {

    });
}

But on server end i receive object of array like below see data and url is empty

{id: 1, type: "image", data: {{}}, url: {}}

this is request header

SetMedia code which call on each image upload

 function handleUploadChange(e) {
        handleClose();
        const file = e.target.files[0];
        if (!file) {
            return;
        }
        const reader = new FileReader();
        reader.readAsBinaryString(file);
        reader.onload = () => {
            const formData = new FormData()
            formData.append('file', file, file.name)

            const obj = { 'id': id, 'type': 'image', 'data': formData, url: file };
            setID(id+1);
            setMedia([...media, obj]);


        }


        reader.onerror = function () {
            console.log("error on load image");
        };
    }

Answer 1

i find solution for it.

i convert images in base64 and send string in request and on server side convert it again to images.