retrieving FormData as its original form

Question

Today, while working on a project which uses below flow for creating new post in website

[Client] ---> FormData --> [FrontEnd Server] ---> FormData -->[Backend Server] --> save post

I have some form-data sent from client using fetch to frontend server

ex..

Client.js

let form_data = new FormData();
form_data.append('title', 'How to resolve Issue');
form_data.append('descr', '<p>The tips are mentioned in Home page!</p>');
form_data.append('image', uploaded_image);
fetch(`${FRONTEND_SERVER_URL}`, {method: 'POST', body: form_data})

Where form_data is an instance of FormData object

but on my server when i try to retrieve same form_data, i can't

ex.. NextServer.js

export default async function handler(req, res){
    ...
    console.log(req.body);
    ...
}

I Got Something like,

------WebKitFormBoundaryJzNYHjUhaXw7Qpnx
Content-Disposition: form-data; name="title"

How to resolve Issue
------WebKitFormBoundaryJzNYHjUhaXw7Qpnx
Content-Disposition: form-data; name="descr"

<p>The tips are mentioned in Home page!</p>

So can you help me to get actual FormData sent from the client instead of raw data(string)

Answer 1

FormData uses multipart/form-data format. That is not a simple POST request with a body. It is generally used for uploading files, that's why it needs special handling. As an alternative, you could use JSON