Not receive any data from react to nodejs

Question

I am trying to send data from front end to back end with react and nodejs. but when I console in front end it appear data but in backend it didn't get anything.

Here is my front end code:

  const [imageSelected, setImageSelected] = useState("");
  // Form submission
  const handleSubmit = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append("file", imageSelected);
    const payload = { title, mission, isSearchable, userId: currentUser.id };
    formData.append("payload", payload);

    // Send post request for signup
    const res = await axios.post("/api/v1/teams/team", formData, {
      headers: { "Content-type": "multipart/form-data" },
    });

    // If no validation errors were found
    if (res.data.validationErrors === undefined) {
      // Clear any errors
      setErrorsArr([]);
      // Hide the errors component
      setShowErrors(false);
      // Toggle the modal
      toggleModal();
      // Go to team management page
      NextRouter.push(`/team/${res.data}`);
    } else {
      // Set errors
      setErrorsArr(res.data.validationErrors.errors);
      // Show the errors component
      setShowErrors(true);
    }
  };


          <input
            type="file"
            className="team--modal_upload_avatar"
            ref={inputFile}
            onChange={(e) => setImageSelected(e.target.files[0])}
          />
          <Grid item xs={12} className={classes.avatarDiv}>
            <Avatar
              aria-label="team"
              className={classes.avatar}
              component="div"
              onClick={onButtonClick}
            >
              <AddAPhotoIcon className={classes.avatarIcon} />
            </Avatar>

Here is my route:

const express = require("express");
const router = express.Router();
const { catchErrors } = require("../errors/errorHandlers");
const { body, param } = require("express-validator");
const cloudinary = require("cloudinary").v2;

const path = require("path");
const Datauri = require("datauri/parser");

const cloud_name = process.env.CLOUDINARY_NAME;
const cloud_api_key = process.env.CLOUDINARY_API_KEY;
const cloud_api_secret = process.env.CLOUDINARY_API_SECRET;
const cloud_url = process.env.CLOUDINARY_URL;

cloudinary.config({
  cloud_name: cloud_name,
  api_key: cloud_api_key,
  api_secret: cloud_api_secret,
  cloudinary_url: cloud_url,
});
// Controller
const {
  createTeam,
  getUsersTeams,
  getManagedTeams,
  getTeamCredits,
  getTeamData,
  updateTeamData,
  shutdownTeam,
  checkTeamPermissions,
  checkTeamPermissionsAndLimits,
  addMember,
  removeMember,
  addMemberBackToTeam,
  quitTeam,
} = require("./teamsController");

const {
  checkUserVerification,
  restrictedRoute,
  checkData,
} = require("../helpers/apiHelpers");

    router.post(
      "/team",
      (req, res) => {
        console.log(res);
        console.log("req body", req.body);
        console.log("req files", req.files);
        console.log("req user", req.user);
    
        const dUri = new Datauri();
        const dataUri = (req) =>
          dUri.format(path.extname(req.name).toString(), req.data);
    
        if (req.files !== undefined && req.files !== null) {
          const { file, id } = req.files;
    
          const newFile = dataUri(file).content;
    
          cloudinary.uploader
            .upload(newFile, {
              folder: "TeamAvatar",
            })
            .then((result) => {
              const imageUrl = result.url;
              const data = { id: req.body.id, imageUrl };
              createTeam(data);
              return res
                .status(200)
                .json({ message: "Success", data: { imageUrl } });
            })
            .catch((err) =>
              res.status(400).json({ message: "Error", data: { err } })
            );
        } else {
          return res.status(400).json({ message: "Error" });
        }
      },
      restrictedRoute,
      [
        body(
          "title",
          "Only alphabetical characters, numbers, and spaces are allowed."
        )
          .not()
          .isEmpty()
          .isLength({ min: 1, max: 25 })
          .trim()
          .matches(/^[a-zA-Z0-9 ]+$/)
          .blacklist("\\<\\>\\;\\[\\]\\{\\}\\|\\%\\=\\(\\)\\~\\#")
          .escape(),
        body("mission", "Only alphabetical characters and spaces are allowed.")
          .not()
          .isEmpty()
          .trim()
          .blacklist("\\<\\>\\;\\[\\]\\{\\}\\|\\%\\=\\(\\)\\~\\#")
          .escape(),
      ],
      checkData,
      catchErrors(checkUserVerification),
      catchErrors(createTeam)
    );

Here is my controller that have create team function:

exports.createTeam = async (req, res) => {
  // Get the user id from the session
  const userId = req.session.passport.user.id;
  console.log("body", req.body);
  console.log("files", req.files);
  console.log("file", req.file);

  // Make sure user has the credits to create a new team
  const teamInfo = await models.User.findOne({
    where: {
      id: userId,
    },
    attributes: ["teamCredits"],
  });

  if (teamInfo.dataValues.teamCredits <= 0) {
    res.status(200).json({
      validationErrors: {
        errors: [
          {
            msg: "You don't have any more team credits.",
          },
        ],
      },
    });
    return;
  }

  const { title, mission } = req.body;
  // const { picture } = req.imageUrl;

  // Make sure the user hasn't already created a team with that title.
  const existingTeam = await models.Team.findOne({
    where: {
      title: title,
      creatorId: userId,
    },
  });

  if (existingTeam !== null) {
    // Response and let the user know.
    res.status(200).json({
      validationErrors: {
        errors: [
          {
            msg: "You already created a team with that name.",
          },
        ],
      },
    });
    return;
  }

  // Generator a public team id
  const firstLetter = title[0];
  const secondLetter = title[1];
  const thirdLetter = title[2];
  const timePart = Date.now();

  const generatedPublicId = `${firstLetter}${secondLetter}${thirdLetter}${timePart}`;

  const roomEntry = {
    name: title,
    status: true,
  };

  const roomResponse = await models.Room.create({ ...roomEntry });

  const defaultTeamValues = {
    title: title,
    type: "simple team",
    mission: mission,
    // picture: picture,
    agreement: "default",
    inputs: "",
    outputs: "",
    duration_in_months: 12,
    status: "Seeking new members",
    public_team_id: generatedPublicId,
    mergedTo: null,
    creatorId: userId,
    date_closed: null,
    current_members_count: 1,
    current_invites_count: 0,
    max_team_members_allowed: 10,
    max_invites_allowed: 20,
    roomID: roomResponse.dataValues.id,
  };

  // No existing team was found with that title and created by that user.

  // Create team.
  const team = await models.Team.create(defaultTeamValues);

  const defaultRoleValues = {
    title: "creator",
    duties: "",
    rights: "all",
  };

  // Create role for new team
  const role = await models.Role.create(defaultRoleValues);

  const defaultMembershipValues = {
    interests: "",
    contributions: "",
    authorization: "creator",
    status: "active",
    application_letter: "",
    date_applied: Sequelize.literal("CURRENT_TIMESTAMP"),
    date_joined: Sequelize.literal("CURRENT_TIMESTAMP"),
    date_departed: null,
    memberId: userId,
    teamId: team.dataValues.id,
    roleId: role.dataValues.id,
  };

  // Create membership for team with role and team ids
  await models.Membership.create(defaultMembershipValues);

  const newCreditValue = teamInfo.dataValues.teamCredits - 1;

  // Update team credits the user has.
  await models.User.update(
    { teamCredits: newCreditValue },
    {
      where: {
        id: userId,
      },
    }
  );

  // Done
  res.status(200).json(team.dataValues.public_team_id);
};

Why my back end didn't get any data I sent from front end to back end?

Add files

server.js:

/* eslint-disable no-undef */
const express = require("express");
const next = require("next");
const dotenv = require("dotenv");
const dev = process.env.NODE_ENV !== "production";
const app = next({ dev });
const handle = app.getRequestHandler();
const compression = require("compression");
const bodyParser = require("body-parser");
const logger = require("morgan");
const session = require("express-session");
const SequelizeStore = require("connect-session-sequelize")(session.Store);
const passport = require("passport");
const helmet = require("helmet");
const sslRedirect = require("heroku-ssl-redirect");
const socketIo = require("socket.io");
const http = require("http");
const {
  saveMessage,
  getAllMessagedByRoomID,
} = require("./services/chat/chatController");

// Setup Next.js then run express.
app.prepare().then(() => {

  // Setup express
  const server = express();
  const chatServer = http.createServer(server);
  const io = socketIo(chatServer);

  // Socket Connection Start

  io.on("connection", (socket) => {
    chatID = socket.handshake.query.chatID;
    socket.join(chatID);

    //Send message to only a particular user
    socket.on("send_message", (message) => {
      saveMessage(message);
      io.in(message.roomID).emit("receive_message", {
        content: message.content,
        roomID: message.roomID,
        userID: message.userID,
      });
    });

    socket.on("get_all_messages", async ({ roomID }) => {
      const allMessagedByRoomID = await getAllMessagedByRoomID(roomID);
      io.in(roomID).emit("send_all_messages", {
        allMessagedByRoomID,
      });
    });
  });

  // Redirect all traffic to use ssl(https);
  server.use(sslRedirect());


  // Define PORT
  const port = process.env.PORT || 3000;
  let serverMode = "development";

  // Check if node is setup for production
  if (!dev) {
    serverMode = "production";
  }

  if (serverMode === "production") {
    server.use(helmet());
  }

  // Logger
  server.use(
    logger("dev", {
      skip: function (req, res) {
        return res.statusCode < 199; // Only log 400 and 500 codes
      },
    })
  );

  // Use body parser
  server.use(bodyParser.urlencoded({ extended: false }));
  server.use(bodyParser.json());

  // Compression
  server.use(compression());

  // Database
  const db = require("./models/index");
  const sequelize = db.sequelize;

  // Test db connection
  sequelize
    .authenticate()
    .then(() => {
      console.log("Database successfully connected!");
    })
    .catch((err) => {
      throw new Error(err);
    });

  // Sessions Setup
  const sessionMaxTime = 1000 * 60 * 60 * 24 * 5; // 5 Days

  // Session options
  const theSession = {
    secret: process.env.SECRET,
    name: "sessId",
    resave: false,
    saveUninitialized: false,
    cookie: {
      maxAge: sessionMaxTime,
      sameSite: true,
    },
    store: new SequelizeStore({
      db: sequelize,
      table: "Session",
    }),
  };

  // Session production options
  if (serverMode === "production") {
    server.set("trust proxy", 1); // Trust first proxy
    theSession.cookie.secure = true; // Serve cookies on HTTPS only
  }

  server.use(session(theSession));

  // Passport Setup
  // require("./config/passport")(passport);
  require("./config/passport");

  server.use(passport.initialize());
  server.use(passport.session());

  // API Routes
  const userRoutes = require("./services/users/usersAPI");
  server.use("/api/v1/users", userRoutes);

  const profileRoutes = require("./services/profiles/profilesAPI");
  server.use("/api/v1/profiles", profileRoutes);

  const teamRoutes = require("./services/teams/teamsAPI");
  server.use("/api/v1/teams", teamRoutes);

  const searchRoutes = require("./services/searches/searchAPI");
  server.use("/api/v1/search", searchRoutes);

  const ratingRoutes = require("./services/ratings/ratingsAPI");
  server.use("/api/v1/ratings", ratingRoutes);

  const inviteRoutes = require("./services/invites/invitesAPI");
  server.use("/api/v1/invites", inviteRoutes);

  const feedbackRoutes = require("./services/feedback/feedbackAPI");
  server.use("/api/v1/feedback", feedbackRoutes);

  const couponRoutes = require("./services/coupons/couponsAPI");
  server.use("/api/v1/coupons", couponRoutes);

  const chatRoutes = require("./services/chat/chatAPI");
  server.use("/api/v1/chat", chatRoutes);

  // Restricted Pages
  const restrictedRoutes = require("./services/restricted/restrictedAPI");
  server.use(restrictedRoutes);

  // Run server
  sequelize.sync({ force: true }).then(() => {
    server.listen(port, (err) => {
      if (err) throw err;
      console.log(`> Ready in ${serverMode} mode.`);
    });
  });
});

Your node and your frontend same server? If it's not then your axios.post should be to a URL (e.g. localhost:8000) instead of an absolute url? — Someone Special
– Someone Special, Commented Apr 10, 2021 at 8:21

Rashed Rahat · Accepted Answer · 2021-04-10 08:42:54Z

1

To handle HTTP POST requests in Express.js version 4 and above, you need to install the middleware module called body-parser.

body-parser extracts the entire body portion of an incoming request stream and exposes it on req.body.

const express = require('express')
const app = express()
const bodyParser = require('body-parser');

// support parsing of application/json type post data
app.use(bodyParser.json());

//support parsing of application/x-www-form-urlencoded post data
app.use(bodyParser.urlencoded({ extended: true }));

router.post("/team", (req, res) => {...})

In Addition:

To handle multipart/form-data request that support file upload, you need to use multer multer module.

Basic usage example:

Don't forget the enctype="multipart/form-data" in your form.

<form action="/profile" method="post" enctype="multipart/form-data">
  <input type="file" name="avatar" />
</form>

var express = require('express')
var multer  = require('multer')
var upload = multer({ dest: 'uploads/' })
 
var app = express()
 
app.post('/profile', upload.single('avatar'), function (req, res, next) {
  // req.file is the `avatar` file
  // req.body will hold the text fields, if there were any
})
 
app.post('/photos/upload', upload.array('photos', 12), function (req, res, next) {
  // req.files is array of `photos` files
  // req.body will contain the text fields, if there were any
})
 
var cpUpload = upload.fields([{ name: 'avatar', maxCount: 1 }, { name: 'gallery', maxCount: 8 }])
app.post('/cool-profile', cpUpload, function (req, res, next) {
  // req.files is an object (String -> Array) where fieldname is the key, and the value is array of files
  //
  // e.g.
  //  req.files['avatar'][0] -> File
  //  req.files['gallery'] -> Array
  //
  // req.body will contain the text fields, if there were any
})

In your case: route.js

const express = require("express");
const app = express();
const multer  = require('multer');
const upload = multer({ dest: 'uploads/' });
const router = express.Router();
const { catchErrors } = require("../errors/errorHandlers");
const { body, param } = require("express-validator");
const cloudinary = require("cloudinary").v2;

const path = require("path");
const Datauri = require("datauri/parser");

const cloud_name = process.env.CLOUDINARY_NAME;
const cloud_api_key = process.env.CLOUDINARY_API_KEY;
const cloud_api_secret = process.env.CLOUDINARY_API_SECRET;
const cloud_url = process.env.CLOUDINARY_URL;

cloudinary.config({
  cloud_name: cloud_name,
  api_key: cloud_api_key,
  api_secret: cloud_api_secret,
  cloudinary_url: cloud_url,
});
// Controller
const {
  createTeam,
  getUsersTeams,
  getManagedTeams,
  getTeamCredits,
  getTeamData,
  updateTeamData,
  shutdownTeam,
  checkTeamPermissions,
  checkTeamPermissionsAndLimits,
  addMember,
  removeMember,
  addMemberBackToTeam,
  quitTeam,
} = require("./teamsController");

const {
  checkUserVerification,
  restrictedRoute,
  checkData,
} = require("../helpers/apiHelpers");



    router.post(
      "/team", upload.single('file'),
      (req, res) => {
        console.log(res);
        // req.file is the `file` file
        // req.body will hold the text fields, if there were any
        console.log("req body", req.body);
        console.log("req file", req.file);
        console.log("req user", req.user);
    
        const dUri = new Datauri();
        const dataUri = (req) =>
          dUri.format(path.extname(req.name).toString(), req.data);
    
        if (req.files !== undefined && req.files !== null) {
          const { file, id } = req.files;
    
          const newFile = dataUri(file).content;
    
          cloudinary.uploader
            .upload(newFile, {
              folder: "TeamAvatar",
            })
            .then((result) => {
              const imageUrl = result.url;
              const data = { id: req.body.id, imageUrl };
              createTeam(data);
              return res
                .status(200)
                .json({ message: "Success", data: { imageUrl } });
            })
            .catch((err) =>
              res.status(400).json({ message: "Error", data: { err } })
            );
        } else {
          return res.status(400).json({ message: "Error" });
        }
      },
      restrictedRoute,
      [
        body(
          "title",
          "Only alphabetical characters, numbers, and spaces are allowed."
        )
          .not()
          .isEmpty()
          .isLength({ min: 1, max: 25 })
          .trim()
          .matches(/^[a-zA-Z0-9 ]+$/)
          .blacklist("\\<\\>\\;\\[\\]\\{\\}\\|\\%\\=\\(\\)\\~\\#")
          .escape(),
        body("mission", "Only alphabetical characters and spaces are allowed.")
          .not()
          .isEmpty()
          .trim()
          .blacklist("\\<\\>\\;\\[\\]\\{\\}\\|\\%\\=\\(\\)\\~\\#")
          .escape(),
      ],
      checkData,
      catchErrors(checkUserVerification),
      catchErrors(createTeam)
    );

edited Apr 10, 2021 at 8:42

answered Apr 10, 2021 at 6:26

Rashed Rahat

2,5152 gold badges25 silver badges45 bronze badges

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

26 Comments

nathan Over a year ago

Yes 1 second. I will add it into post

nathan Over a year ago

Just added more code into my server.js and route

Rashed Rahat Over a year ago

Ok let me c. I'll get back to you.

Rashed Rahat Over a year ago

Updated my answer. Please follow that answer.

Rashed Rahat Over a year ago

Let me c. I'm updating my answer server.js will be added into my answer.

|

Collectives™ on Stack Overflow

Not receive any data from react to nodejs

1 Answer 1

26 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

26 Comments

Your Answer

Sign up or log in

Post as a guest

Related