Node.js REST endpoint not catching parameters passed from axios request

Question

I'm making a POST request from a React front-end using axios to an endpoint to save some data to my DB (MongoDB). I'm getting an error that one cannot read property 'name' of undefined. I think that's occurring because req.body is undefined but I can't understand what's wrong with my axios request. I logged all the parameters and they are there (not undefined). The axios request and the endpoint are written below. Any help will be appreciated. Thanks!

Axios Request

const uploadElement = async (name, HTMLCode, JSCode, CSSCode, screenshot) => {
console.log(name)
  try {

    await axios({
      method: 'post',
      url: '/api/elements',
      data: {
        name: name,
        HTMLCode,
        JSCode,
        CSSCode,
        screenshot
      }
    });
  } catch (e) {
      console.log(e);
  }
}

Endpoint for POST Request

router.post("/", upload.single("screenshot"), async (req, res) => {
  try {
    const newElement = new Element({
      name: req.body.name,
      JSCode: req.body.JSCode,
      HTMLCode: req.body.HTMLCode,
      CSSCode: req.body.CSSCode,
      screenshot: req.file.buffer,
    });

    await newElement.save();
    res.send("Data uploaded successfully!");
  } catch (e) {
    console.error(e);
  }
});

Server.js

const express = require("express");
const passport = require("passport");
const session = require("express-session");
const cors = require('cors');

const elementRouter = require("./routes/elementRoute");
const authRouter = require("./routes/authRoute");

const connectDB = require("./config/db");

const app = express();

const port = process.env.PORT || 5000;
connectDB();

app.use(
  session({
    secret: "googleOAuth",
    resave: false,
    saveUninitialized: true,
  })
);

app.use(cors());

// Passport Config
require("./config/passport")(passport);
app.use(passport.initialize());
app.use(passport.session());

app.use("/api/elements", elementRouter);
app.use("/api/auth", authRouter);

app.listen(port, () => {
  console.log(`Server is up on port ${port}`);
});

@ShmiliBreuer It's working for all the text fields but not for the image. Can you tell me how to parse that? — Sarthak Kundra
– Sarthak Kundra, Commented Aug 24, 2020 at 17:49
can you please explain what you are trying to do with the file on the backend? and what is the file format on the front end? — Shmili Breuer
– Shmili Breuer, Commented Aug 24, 2020 at 18:23
The file is an image of jpeg/png format on the front end. It's actually a screenshot of the component. I know that it's not good practice to save it on the DB but for some reason I have to do it — Sarthak Kundra
– Sarthak Kundra, Commented Aug 24, 2020 at 18:50

Shmili Breuer · Accepted Answer · 2020-08-24 17:34:38Z

1

You need to install and require body-parser in your serverside code

First run npm i --save body-parser

Then require it like this

const bodyParser = require("body-parser");

Then use it after you declare your app ( after this line const app = express();)

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

This makes the data of your request available in req.body

answered Aug 24, 2020 at 17:34

Shmili Breuer

4,1652 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Node.js REST endpoint not catching parameters passed from axios request

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related