Express API controller is receiving empty strings-CodePudding

When I send post requests to my API where the body is a single string, the API is receiving an empty string instead.

function call (client):

 const response = await api.uploadImg("image");

axios request (client):

const uploadImg = async (image: string) => {
  const response = await axios.post(`${apiBaseURL}/api/image`, image);
  return response.data;
};

router (server):

import { Router } from "express";
import controller from "../controllers/image";

const router = Router();

router.post("/", controller.upload);

export default router;

controller (server):

import { Request, Response } from "express";

const upload = async (req: Request, res: Response) => {
  res.json(req.body)
};

export default { upload };

The response I get after sending the string "image" is:

{image: ''}

It is confounding, because I have another route that successfully receives request body data without destroying it, but this route (and another test route that I made) always receives an empty string instead of the string sent. The route originally was supposed to receive a base64 image string and upload it to cloudinary, but when it looked like it was just receiving an empty string, I changed the controller to simply return the request body for testing purposes.

full express server:

import express from "express";
import morgan from "morgan";
import cors from "cors";
// util
import config from "./config";
import connectMongo from "./config/mongo";
import connectCloudinary from "./config/cloudinary";
// routes
import indexRoutes from "./routes";
import userRoutes from "./routes/user";
import postRoutes from "./routes/post";
import imageRoutes from "./routes/image";

const server = express();

server.listen(config.server.port, () => {
  console.log("Server running on port:", config.server.port);

  // logging when in developement
  if (config.server.env === "developement") server.use(morgan("dev"));

  // parse requests
  server.use(express.urlencoded({ extended: true, limit: "50mb" }));
  server.use(express.json({ limit: "50mb" }));

  // connect the database
  connectMongo();

  // connect cloudinary for image uploads
  connectCloudinary();

  // cross-origin-routing
  server.use(
    cors({
      origin: config.client.url,
    })
  );

  // routing
  server.use("/", indexRoutes);
  server.use("/api/users", userRoutes);
  server.use("/api/posts", postRoutes);
  server.use("/api/image", imageRoutes);
});

link to github repo for back-end here.

CodePudding user response：

The problem was in the axios call:

const uploadImg = async (image: string) => {
  const response = await axios.post(`${apiBaseURL}/api/image`, image);
  return response.data;
};

Where I was passing the string variable image, I needed to put it into curly braces to make it an object. This:

const uploadImg = async (image: string) => {
  const response = await axios.post(`${apiBaseURL}/api/image`, {image});
  return response.data;
};

...works perfectly.