How to send formData as nested value of the object in React.js?

Viewed 273

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?

0 Answers
Related