failed to send and recieve form data object with react and nodejs

Question

I am trying to sent my form data to node js and retrieve at there.But I am failed to do it with form data object.

handleSubmit(data) {
    console.log(data);
    const forms=new FormData();
    forms.append('fname','pranab');
    let promise=fetch('http://localhost:8080/reactTest', {
        method:'POST',
        mode:'CORS',
        body:JSON.stringify(forms),
        headers:{
                'Content-Type':'application/json',
                'Accept':'application/json'
        }
    }).then(res =>res.json()).then(result => console.log(result))
}

in the above code I am sending form data object to the serve side.At the server side I am trying to retrieve it using below code.

app.post('/reactTest',function(req,res) {
        var contents=req.body;
        console.log(contents);
        return res.send({status:'working'});
    })

but it displays nothing in the console.What the issue here is?

output is

titech@titech-System-Product-Name:/var/www/html/nodejs$ node index.js
port listening on 8080
{}

when i trying to console it with 'req.body.fname' it gives 'undefined' as output in place of '{}'.

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch mode: 'cors', - seems to be lowecased — Alejandro, Mar 22 '18 at 08:33
Try this it may help https://stackoverflow.com/questions/47630163/axios-post-request-to-send-form-data — Srikanth Gowda, Mar 22 '18 at 08:46
i am checked with normal json data by replacing the form data object.It works perfectly.But i don't know what the issue while using form data object — Pranab V V, Mar 22 '18 at 09:40
@federer Looks like you can't simple convert FormData object to JSON without some coding. I edit my answer and provide some code. Try it — Vasyl Moskalov, Mar 22 '18 at 10:03

Vasyl Moskalov · Accepted Answer · 2018-03-22T10:02:44.817

0

Looks like you need some function to convert formData to JSON. Like this one:

function formData2Json(formData){
  let ret={};
  for(let pair of formData.entries()) {
   let val=ret[pair[0]];
   if (!val) {
    ret[pair[0]]=pair[1];
   }
   else {
     if (Array.isArray(val)) {
       val.push(pair[1]);
     }
     else {
       ret[pair[0]]=[val,pair[1]];
     }
   }
  }
  return ret;
}

and than replace body:JSON.stringify(forms) with body:JSON.stringify(formData2Json(forms))

edited Mar 22 '18 at 10:02

answered Mar 22 '18 at 08:37

Vasyl Moskalov

4,242
3
20
28

ya of course.work perfectly without using form data object. – Pranab V V Mar 22 '18 at 08:38
Ok. Then try to use cors middleware: `app.use(require('cors'))` – Vasyl Moskalov Mar 22 '18 at 08:45
i already defined it.just wait a minute i will edit my question with the output. – Pranab V V Mar 22 '18 at 08:47
it works.when i changed the content type as 'multipart/form-data' and send the form data object,but it displays nothing.what the reason? – Pranab V V Mar 22 '18 at 10:18
how can i retrieve uploaded file content at server? – Pranab V V Mar 22 '18 at 10:20
What you mean `displays nothing`? – Vasyl Moskalov Mar 22 '18 at 10:42
ie, how can i sent a file details along with this data and retrieve at the server side? – Pranab V V Mar 22 '18 at 10:50
how can i upload a file to the server? – Pranab V V Mar 22 '18 at 10:53
Aha. You need to upload file? Because now you just try to upload some forms to server – Vasyl Moskalov Mar 22 '18 at 11:02
ya.my aim is to upload a file to the server,that's why i using form data. – Pranab V V Mar 22 '18 at 11:10

score 0 · Answer 2 · answered Mar 22 '18 at 08:51

try this it may help

var bodyFormData = new FormData();
bodyFormData.set('userName', 'Fred');

axios({
    method: 'post',
    url: 'myurl',
    data: bodyFormData,
    config: { headers: {'Content-Type': 'multipart/form-data' }}
})
    .then(function (response) {
        //handle success
        console.log(response);
    })
    .catch(function (response) {
        //handle error
        console.log(response);
    });

failed to send and recieve form data object with react and nodejs

2 Answers2