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)
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