I am trying to send formData to a server. According to a backend developer I have to wrap binary file with image object when I send get request like below.
{image: (binary)}
However when I send image object to a server, the value of the image property is just a empty object.
{image: {}}
Here is my code
const updateUserInfoImage = ({
parameters,
headerParameters
}) => {
const { file: formData } = parameters
console.log(formData.get('file')) // I can check my formData in devtool
axios.post(`${baseUrl}profile_img/`, {image: formData}, {
headers: headerParameters
}).then(res => console.log(res))
}
const useUpdateUserInfoImage = (file: any, fileName, handleSuccess?: () => void) => {
const formData = new FormData()
formData.append('file',file)
formData.append('name','cat')
return (
updateUserInfoImage({
parameters: { file: formData },
headerParameters: {
'Content-Type': 'multipart/form-data'
},
})
)
}
const HeaderImage = () => {
const classes = useStyle()
const uploadImage = (e) => {
const file = e.target.files[0]
const fileName = e.target.files[0].name
useUpdateUserInfoImage(file, fileName)
}
return (
<Box className={classes.memberInformationImg}>
<div className={classes.memberImage} />
<label htmlFor='file' className={classes.memberImageEditButton}>
Edit
</label>
<input
className={classes.uploadImage}
type='file'
name='file'
id='file'
accept='image/*'
onChange={uploadImage}
/>
</Box>
)
}
However when I send it with just formData, I can see that binary file is successfully sent.
Should I create another object contains same properties and value of formData using FormData.entries() method and assign it to image object?