req.body returning empty array in a POST request

user_14194607 0
Viewed 1238

enter image description hereI am really confused. I have been doing this for days and can't seem to find what is going on. I am using FormData to upload data to the database and it is always returning empty array when I console.log(req.body); Here is the code

This is the frontend (React app)

import React from 'react';
import logo from './logo.svg';
import './App.css';

const App = () => {

  const submit = () => {
    const data = new FormData()
    data.append("theme", "This is the theme")
    fetch("/", {
      method: "post",
      headers: {
        "Content-Type": "multipart/form-data"
      },
      body: data
    }).then(res => res.json())
    .then(result => {
      console.log(result)
    })
    }

  return (
    <div>
      <button onClick={ () => submit() }>submit</button>
    </div>
  )
}

export default App;

And here is the backend

const express = require("express")
const bodyParser = require("body-parser")
const path = require('path')

const app = express()
app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())
app.use(express.static('./public'));

app.post("/", (req, res) => {
    console.log(req.body)
})


app.listen(5000, () => {
    console.log("Port started on 5000")
})
body-parser reactjs express node.js
3 Answers

If you want to just send data without files then send it as an JSON and not multipart/form-data

If you check out the body-parser documentation you will see that...

This does not handle multipart bodies, due to their complex and typically large nature. For multipart bodies, you may be interested in the following modules:

busboy and connect-busboy, multiparty and connect-multiparty, formidable, multer

You can find this note somewhere at the top of the bod-parser documentation.

If you want to send an multipart/form-data lets say you want to upload an file then use Multer.

https://www.npmjs.com/package/multer

However, you need to rewrite your header to application/json and send and stringyfied object

Try this out:

  const submit = () => {
    let data = { theme: "My theme" };
    fetch("/", {
      method: "post",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify(data),
    })
      .then((res) => res.json())
      .then((result) => {
        console.log(result);
      });
  };
user_109907370

As it is said in body-parser documentation, body-parser does not handle multipart forms. see docs here.

So you have to option left : either send your form data as json (assuming your not uploading a file or something ..)

or use any of the recommended alternative that you can find on the link I provided (multer being the most use as far as i know)

user_54139040

To parse form data, you'll have to use the bodyParser.urlencoded middleware.

Add the following to your code, before you handle the POST request

BodyParser is no longer bundled with Express

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({ extended: false }));

Based on my reading going back, you can also use multer

Below sample code is working for me. Update accodingly as per your needs

var express = require('express');
var bodyParser = require('body-parser');
var multer = require('multer');
var upload = multer();
var app = express();

app.get('/', function(req, res){
   res.render('form');
});

app.set('view engine', 'pug');
app.set('views', './views');

// for parsing application/json
app.use(bodyParser.json()); 

// for parsing application/xwww-
app.use(bodyParser.urlencoded({ extended: true })); 
//form-urlencoded

// for parsing multipart/form-data
app.use(upload.array()); 
app.use(express.static('public'));

app.post('/', function(req, res){
   console.log(req.body);
   res.send("recieved your request!");
});
app.listen(3000);

Also note:

A new body object containing the parsed data is populated on the request object after the middleware (i.e. req.body). This object will contain key-value pairs, where the value can be a string or array (when extended is false), or any type (when extended is true).

user_11091790
Related