How to handle FormData from express 4

Question

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

Farsighted

body-parser doesn't handle multipart request bodies, try something like multer. – Limber

@Limber I see thanks, feel free to add it to answer. Maybe it would be more simple if I just extra the data to JSON? I'm suprised that I can just pass FormData to fetch and its send as multipart. – Farsighted

Answer 1

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);
});

Limber

thx, know of any utils to take form data and return it as a JSON object (for things like text inputs and the like) for sending via urlencoded – Farsighted

@Farsighted you probably have to use something like formData.entries() to build a JS object from the form contents. – Limber

What does happen behind the scene here upload.fields([]) ? – Papain

If you can't get this to work, try upload.any() instead of upload.fields([]). You'll probably eventually want to figure out what field specifications you want to put in the array but any is a good place to start. – Mizell

is there no way to inject it like bodyparser? (app.use(multer()) or similar) – Aneto

@Blauhirn might be difficult with multer, but express-fileupload can be used like that. – Limber

@Blauhirn lots of options :D – Limber

after spending my whole day looking through 100s of a solution, and nothing work, then he finally saves my day, thank you soo much. – Syck

Answer 2

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

Vala

Don't have much experience with multer, but wouldn't it be better to default to .none rather than .any? – Foundling

Answer 3

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.

Palermo

Answer 4

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)

- 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!

Disarmament