ReactJS: Unable to send JSON data and PDF file in one POST call

Question

I am working on GRAILS-ReactJs based project which involves a scenario where I need to send the RESUME and the JSON data in one POST call. However, I am able to send file in one call but the data I am getting is null. I am using Grails-3 at my server side and receiving the POST request as multipart file. I want both JSON and Multipart file object to be combined in one object to send to the server and want to receive the file and the JSON data both at the server side. I have tried changing the content type of the header but ut doesn't work.

Answer 1

You can't post JSON data along with the file or any other attachment. You can post it as form data to your back end. The form data is passed as a multi-part data to the server with relevant boundaries. Here's a sample code for your reference. You may pass json data along with the formData as key, value pairs.

export function postAttachment (fileData, fileName) {
  let formData = new FormData()
  formData.append('prop1', 'value1')
  formData.append('prop2', 'value2')
  formData.append('upload', fileData, fileName)
  return fetch('/your/endpoint', {
    headers: {
      'Accept': 'application/json',
      'header1': 'headerValue1'
    },
    method: 'POST',
    body: formData
  })
}

Hope this helps. Happy Coding !