My MERN stack webapp is working perfectly fine in localhost but after deploying it gives Error : 500

Sam929
Sam929 Member Posts: 2 ✭
in Developer APIs

my MERN stack webapp is working perfectly fine in localhost but after deploying it just for testing purposes on render(nodejs-backend) and netlify(react js- frontend) , all other parts are working perfectly except for the apis that have image upload system in them. It shows Error : 500, (name: "AxiosError", code: "ERR_BAD_RESPONSE") on the console of browser but show no error on backend console, even though i know it is server side error. I am sure that this error is causing because of cloudinary somehow. I already checked Environment Variables by console them, and they are working fine. The simplest page with only single image upload is : 99 Acres Clone . This page have only one image upload input and other simple text inputs. The github url for them are : https://github.com/Itachi7011/18JulyPropertyCloneBackend/tree/mainError and https://github.com/Itachi7011/18July2024PropertyCloneFrontEndReactJs/tree/mainError . Currently these githubs are private , but if you respond and you needed the entire code i will make them private for you to copy them asap. I am providing you basic code that you might needed. One more thing , i cant use disk storage because i am using free version of render in which disk storage is not avaiable. Because i already told you that this is just for testing and trial not for production.

backend app.js :

cloudinary.config({cloud_name: CloudinaryDB,api_key: CloudinaryAPIKey,api_secret: CloudinarySecret,secure: true,});

const cloudinaryStorage = multer.memoryStorage();

const upload1 = multer({ storage: cloudinaryStorage });

const uploadToCloudinary = async (file) => {try {console.log("upload starts")const result = await cloudinary.uploader.upload(file, {folder: "Projects",resource_type: "auto",});console.log(result);

return result;

} catch (err) {console.error(err);return null;}};

app.post("/api/addNews", upload1.single("image"), async (req, res) => {try {// console.log(req.file);console.log("upload begins");const b64 = await Buffer.from(req.file.buffer).toString("base64");let dataURI = "data:" + req.file.mimetype + ";base64," + b64;const cldRes = await uploadToCloudinary(dataURI);const userData = await new NewsDB({category: req.body.category,heading: req.body.heading,description: req.body.description,metaTitle: req.body.metaTitle,metaKeyword: req.body.metaKeyword,metaDescription: req.body.metaDescription,youtubeUrl: req.body.youtubeUrl,status: req.body.status,image: {data: cldRes.secure_url,publicId: cldRes.public_id,

    contentType: "image/png",  },  dateOfFormSubmission: new Date(),});await userData.save();console.log("New News Added in Database Successfully");res.send({ status: "Ok", data: "New News Saved." });

} catch (err) {console.log(err);res.redirect("/failure-message");}});

Tagged:

Answers

  • atdatu
    atdatu Member, Cloudinary Staff Posts: 18

    Hi @Sam929 ,
    Having the SDK configured with API_KEY and API_SECRET, it looks like the upload action is a secured upload. Thus, kindly raise a support ticket as we may have to investigate further into the logs and determine if the error happens in the Cloudinary side.

  • Sam929
    Sam929 Member Posts: 2 ✭

    I raised the ticked, with same subject title as this one : My MERN stack webapp is working perfectly fine in localhost but after deploying it gives Error : 500, i mentioned cloud name too in that post. please help i am stuck here for many days and tried many things but none of them work.

Categories