No able to send array from front end (reactJs) to the backend (nodejs)

Viewed 44

This is the code for on my front end When the object vendor is sent to the backend, the array key, value pair businessImages is empty [I came to this conclusion when nothing got console logged when I tried logging businessImages in the backend] When I console log the vendor object, from the front end, it clearly shows that businessImages is populated. I have no idea what's going on.

Frontend code (reactjs)

    const handleSubmit = async (e) => {
    e.preventDefault();
    if (businessImages.length > 15) {
      alert("You've selected too many images for your business");
      setBusinessImages([]);
    } else {
      const formDataBusinessImages = new FormData();
      const formDataProfilePicture = new FormData();
      vendor = {
        name: name.current.value,
        email: email.current.value,
        mobileNumber: mobileNumber.current.value,
        businessAddress: businessAddress.current.value,
        mainService: selectedService,
        subServive: selectedSubService,
        businessImages: [],
        aboutBusiness: aboutBusiness.current.value,
        minPrice: minPrice.current.value,
        maxPrice: maxPrice.current.value,
        featured: featured,
      };
      formDataProfilePicture.append("file", profilePicture);
      formDataProfilePicture.append(
        "upload_preset",
        process.env.REACT_APP_CLOUDINARY_KEY
      );
      try {
        await axios
          .post(
            "https://api.cloudinary.com/v1_1/devign/image/upload",
            formDataProfilePicture
          )
          .then((res) => {
            console.log("Profile pic uploaded");
            vendor.profilePicture = res.data.secure_url;
          });
      } catch (err) {
        console.log(err);
      }
      businessImages.map(async (image) => {
        formDataBusinessImages.append("file", image);
        formDataBusinessImages.append("upload_preset", process.env.REACT_APP_CLOUDINARY_KEY);
        try {
          await axios
            .post(
              "https://api.cloudinary.com/v1_1/devign/image/upload",
              formDataBusinessImages
            )
            .then((res) => {
              vendor.businessImages.push(res.data.secure_url);
            });
        } catch (err) {
          console.log(err);
        }
      });

      handleUpload(vendor);
    }
  };
  const handleUpload = async (uploadData) => {
    try {
      // console.log(businessImagesUrl);
      // console.log(uploadData);
      await axios.post("/auth/register", uploadData);
    } catch (err) {
      console.log(err);
    }
  };

Backend code (nodejs)

 router.post("/register", async (req, res) => {
  const newVendor = new Vendor({
    name: req.body.name,
    email: req.body.email,
    mobileNumber: req.body.mobileNumber,
    businessAddress: req.body.businessAddress,
    mainService: req.body.mainService,
    subService: req.body.subService,
    profilePicture: req.body.profilePicture,
    businessImages: [],
    minPrice: req.body.minPrice,
    maxPrice: req.body.maxPrice,
    featured: req.body.featured,
  });
  try {
    newVendor.businessImages.push(req.body.businessImages);
    console.log(req.body.businessImages, req.body.profilePicture);
    const vendor = await newVendor.save();
    res.status(200).json("Successfully registered");
  } catch (err) {
    console.log(err);
  }
});
0 Answers
Related