Login/Register
How to use Body Parser with import and not required? ES6
Asked Answered
Solved javascriptpostecmascript-6importbody-parser
H

1

9

I am working on a project that uses strictly imports, disabling me from using required statements. I am wondering how I can read the contents of a post request to my server using the import for Body Parser.

'''

//jshint esversion:6

// Require the needed NPMs

import Radar from "radar-sdk-js";
import express from "express";
import bodyParser from "body-parser";
import { dirname } from 'path';
import { fileURLToPath } from 'url';



const __dirname = dirname(fileURLToPath(import.meta.url));

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));
app.use(express.static("public"));

/*app.use(bodyParser.json({
        verify: (req, res, buf) => {
        req.rawBody = buf;
     }
})*/

app.get("/", function(req, res) {

  res.sendFile(__dirname + "/public/index.html");

});

app.post("/", function(req, res) {

      console.log(req.body);
      console.log(req.body.trackedName);

'''

Hypotonic answered 15/2, 2020 at 7:38 Comment(9)
So, bodyParser.json() and bodyParser.urlencoded() are built into Express as express.json() and express.urlencoded() so you don't have to import body-parser at all. – Jos
In terms of my code, '''app.use(express.json()); app.use(express.urlencoded({extended: true})); ''' should work then? And then I can get the contents using req.body? – Hypotonic
Yes, that should work. – Jos
Yeah, well it doesn't. I currently have ''app.use(express.json()); app.use(express.urlencoded()); app.use(express.static("public")); app.post("/", function(req, res) { console.log(req.body); console.log(req.body.trackedName); }); '' and req.body is {} although the input was not empty. – Hypotonic
What is generating the POST request? Can you show us that code? Have you looked at the actual http request to be sure that the body is there and properly formatted? Are you sending JSON or urlencoded body? Any chance it's sending multipart/form-data instead of one of the two content types you have middleware for? This just requires some debugging on your part to look at the actual incoming request, see the body, see the content-type and then figure out why it isn't being matched by one of your middleware handlers. – Jos
POST request: '''<body> <div class="container"> <form class="" action="/" method="post" enctype="multipart/form-data"> <input type="text" name="userName" class="" placeholder="Enter your username"/> <input type="text" name="trackedName" class="" placeholder="Enter the username you want to track"/> <button type="submit" class="">Submit</button> </form> </div> </body>''' I believe its sending multi-part/form-data because of the enctype. – Hypotonic
@TristinB Sounds like you want github.com/expressjs/multer then, not json or urlencoded. – Prague
You are apparently using multipart/form-data. I don't know why. But, you have NO middleware for that content type. Your middleware expects application/json or application/x-www-form-urlencoded. The content-type you are using would require a different middleware as it's a different format. Unless you are uploading files, there is no reason to use multipart/form-data. – Jos
I was using information from an online source to help me, and I'm guessing they used multipart/form-data for whatever reason. I changed this, to application/json and it worked perfectly. Thank you so much for your help. – Hypotonic
J
3

Your form is using multipart/form-data as the content-type, but you don't have any middleware for that content-type and there's no reason to use that more complicated content-type unless you are also uploading files. You can switch the content-type to either one of the two that your middleware does support, application/json or application/x-www-form-urlencoded so it will match your middleware.

Jos answered 15/2, 2020 at 8:25 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.