React - Nodejs FormData - req.body is empty {}

Question

I'm trying to use FormData in my web client app because I want to upload files. Currently, even without the files, I struggle issue that I canno't solve, so maybe someone could help me here...

This is the code:

Client Side (Next js):

This is the HTML part:

<form onSubmit={handleSubmit} encType="multipart/form-data">
       <input type="text" value={fullName} onChange={(e) => setFullName(e.target.value)} />
       <button type="submit">Send Message</button>
</form>

This is the handleSubmit function:

const handleSubmit = (e) => {
     e.preventDefault();
     let contactData = new FormData()
     contactData.append("fullName", fullName);

     axios({
           method: 'post',
           url: SERVER_URL + "/contactUs",
           data: contactData,
           headers: { 'Content-Type': 'multipart/form-data' }
     })
};

Now, the server side (Node js) is like below:

This is part of the app.js:

var app = express();
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

I tried also replace bodyParser with express, not worked either. My body parser version is 1.19.0, and express version is 4.17.1.

And finally the router:

router.post('/contactUs', (req, res) => {
    console.log(req.body);
})

The problem is that The output of the line above is always {} !

Any ideas anyone please ?

You need something like [Multer](https://github.com/expressjs/multer#readme) in your Express app to handle `multipart/form-data`. You should also [not be setting the content-type request header](https://stackoverflow.com/a/68643919/283366) — Phil, Nov 15 '21 at 23:31

React - Nodejs FormData - req.body is empty {}

0 Answers0