CODEWITHSUNDEEP
node.jsexpressexpress-4
SuperUberDuper
SuperUberDuper

Reputation: 9623

How to handle FormData from express 4

I tried sending some form data to my node server but req.body has none of my form fields the node side

 var express = require('express')
var app = express()
var path = require('path')
var bodyParser = require('body-parser')
app.use(bodyParser.urlencoded({
  extended: true
}));

app.get('/', function (req, res) {
  res.sendFile('index.html')
})
app.post('/sendmail', function (req, res) {

  const formData = req.body.formData

this is what I'm sending from the browser

fetch('/send', {
  method: 'POST',
  body: new FormData(form)
})

in dev tools I only see the data passed in the Referer, maybe that is my issue

Referer:http://localhost:3000/?name=&budget=%C2%A31000

Upvotes: 81

Views: 115650

Answers (4)

Chanrithisak Phok - Zen 善
Chanrithisak Phok - Zen 善

Reputation: 2127

Express File Upload (Another alternative approach)

=> Since many people suggest you with multer, there is also other alternative way to handle form-data in body request.

- 1st: install express-fileupload package

npm i express-fileupload

- 2nd: In your app.js or server.js or whatever

var express = require('express')
const fileupload = require("express-fileupload");

const app = express();  

// REMARK: file upload handler for form-data
app.use(fileupload());

- 3rd: If you have lots of fields in the form-data (like below for example, a mixture of text, and/or file combine) enter image description here

- 4rd: In your controller, just use

app.post('/send', (req, res) => {
  console.log('form data: ', req.body.title); 
  console.log('form data: ', req.files.image); //because I name my file as image it could be whatever your field name could be. Bonus: you can convert to base64 string and store in database as plain text for image)
  res.setHeader('Content-Type', 'application/json');
});

Hope this help, Happy coding!

Upvotes: 0

Jeremy
Jeremy

Reputation: 89

import express from 'express'
import multer from 'multer'

const app = express();

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(multer().none());

Add app.use(multer().none()); if you don't want the upload feature.

Upvotes: 0

Merrin K
Merrin K

Reputation: 1790

Try This also

Slight improvement of @robertklep answer, can send the response as json

const express = require('express');
const app = express();
const multer  = require('multer');
const upload = multer();

app.post('/send', upload.any(), (req, res) => {
  console.log('data', req.body);
  res.setHeader('Content-Type', 'application/json');
  res.send(req.body);
});

npm i multer --save

Upvotes: 4

robertklep
robertklep

Reputation: 203304

body-parser doesn't handle multipart bodies, which is what FormData is submitted as.

Instead, use a module like multer.

For example, to retrieve the (regular) fields of a request:

const multer = require('multer');
const upload = multer();

app.post('/send', upload.none(), (req, res) => {
  const formData = req.body;
  console.log('form data', formData);
  res.sendStatus(200);
});

Upvotes: 152

Related Questions