Cannot post data from react to nodejs using fetch

Question

I am using fetch to post data from react side to nodejs (both of which are running in my localhost) so what i am doing is

let formData = new FormData();
    formData.append("agent_name", this.state.agentName);
    formData.append("agent_email", this.state.agentEmail);
    formData.append("agent_phone", this.state.agentPhone);
    formData.append("agent_id", this.state.agentID);
    formData.append("agent_password", this.state.agentPassword);
    formData.append("state", this.state.selectedState);
    formData.append("city", this.state.selectedCity);
    formData.append("file", this.state.file);
    formData.append("imageurl", this.state.imageUrl);
   fetch("http://localhost:4000/add_delivery_agent", {
      method: "POST",
      body: formData,
    })
      .then((response) => response.json())
      .then((responsejson) => {
        console.log(responsejson);
      });

and then on server side i did

exports.addDeliveryAgent = async (req, res, next) => {
  let data = req.body;
  console.log(data);
  }
};

but console.log(data) gives me empty object always, what am i doing wrong here ?

Also the data gets posted via axios but i want it via fetch !

App.js config is

const express = require("express");
const bodyparser = require("body-parser");
const app = express();
const mongoconnect = require("./utils/database").mongoconnect;
const path = require("path");
var cors = require("cors");

// const adminUserRoute = require("./routes/admin/user/user.js");
const adminDeliveryAgentRoute = require("./routes/admin/deliveryAgent/deliveryAgent");
const user = require("./routes/admin/user/user.js");

app.use(express.urlencoded());
app.use(bodyparser.urlencoded({ extended: false }));
app.use(bodyparser.json());
app.use(cors());
app.use("/tfd/controlcenter/", express.static(path.join(__dirname, "/build")));

// app.use(adminUserRoute);
app.use(adminDeliveryAgentRoute);
app.use(user);

mongoconnect(() => {
  app.listen(4000, () => {
    console.log("running 4000");
  });
});

Have you included `app.use(express.urlencoded())` at the start to parse formdata? [It sounds like this](https://stackoverflow.com/questions/24543847/req-body-empty-on-posts). — ObsoleteAwareProduce, Aug 31 '20 at 14:14
[This might work](https://stackoverflow.com/questions/49067423/multipart-form-data-post-method-using-express-js). I think you need `multer` or `formidable` nodejs module to parse FormData. — ObsoleteAwareProduce, Aug 31 '20 at 14:20
Please check if the issue is in the FE or BE. Use Postman or Curl to check the BE. And add the http request via the chrome dev tools — Daniel, Aug 31 '20 at 14:34
check status code and Network tab in chrome plz, send error code and message, check request and response headers. — Ciro Spaciari, Aug 31 '20 at 14:54
can you send all your express configuration? to try to simulate the issue? — Ciro Spaciari, Aug 31 '20 at 15:04
@CiroSpaciari have updated my post here, tell me if this is want u want ? — Ratnabh kumar rai, Aug 31 '20 at 15:08

score 0 · Answer 1 · answered Aug 31 '20 at 14:23

try adding Content-Type header

   fetch("http://localhost:4000/add_delivery_agent", {
      method: "POST",
      body: formData,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
        // or
        // 'Content-Type': multipart/form-data
      },
    })

score 0 · Answer 2 · answered Aug 31 '20 at 16:13

0

Don't use form data instead use plain object as bodyparser doesn't support multipart/form-data which is what form data uses

formData={}

formData.agent_name=this.state.agentName;
formData.agent_email=this.state.agentEmail;
//..
formData.imageurl=this.state.imageUrl;

fetch("http://localhost:4000/add_delivery_agent", {
  method: "POST",
  body: formData,
})
  .then((response) => response.json())
  .then((responsejson) => {
    console.log(responsejson);
  });

answered Aug 31 '20 at 16:13

Vinay

7,442
6
25
48

i also want to upload a file so can we send a file in plain object ? – Ratnabh kumar rai Aug 31 '20 at 17:06
Looks like you are sending an image url or you is it a file object? Anyway what's the maximum possible file size here? – Vinay Sep 01 '20 at 03:49
i am sending a file object here, no limit on the size here also i am sending image of just 70kb – Ratnabh kumar rai Sep 01 '20 at 04:33
I see, then plain object wont be useful here try using some bodyparser like [mutler](https://github.com/expressjs/multer) instead – Vinay Sep 01 '20 at 15:44

Cannot post data from react to nodejs using fetch

2 Answers2