📌 Title
Profile Image Upload API Returning 500 Internal Server Error
📝 Description
When attempting to upload a profile image from the Edit Profile page, the image upload fails.
The browser console shows:
POST http://localhost:3000/api/upload 500 (Internal Server Error)
Additionally, a UI message appears:
❌ Failed to upload image
This indicates a backend issue with the /api/upload endpoint.
🔄 Steps to Reproduce
Login to the application.
Navigate to Edit Profile.
Click on the camera icon on the profile avatar.
Select an image file.
Observe:
Image does not upload.
Error toast: “Failed to upload image”.
Console shows 500 Internal Server Error.
✅ Expected Behavior
Selected image should:
Be uploaded successfully.
Update the user profile picture.
Return success response (200 OK).
No console errors should appear.
❌ Actual Behavior
API returns:
500 Internal Server Error
Image is not uploaded.
UI displays failure message.
📷 Screenshot
🧠 Possible Causes
Backend upload route misconfigured.
Missing file handling middleware (e.g., multer).
Cloudinary / storage configuration error.
Environment variables not set.
Body parser issue with multipart/form-data.
Incorrect API endpoint URL.
CORS misconfiguration.
File size limit exceeded.
🛠️ Suggested Areas to Check
Backend:
/api/upload route implementation.
File upload middleware configuration.
Environment variables (.env file).
Cloud storage credentials.
Error handling inside upload controller.
Frontend:
Ensure request uses FormData.
Ensure Content-Type is NOT manually set (let browser handle it).
Confirm correct API base URL.
Example (correct frontend pattern):
const formData = new FormData();
formData.append("image", file);
await fetch("/api/upload", {
method: "POST",
body: formData,
});
🚨 Severity
High — Core profile functionality broken.
🏷️ Recommended Labels
bug
backend
api
file-upload
high-priority
🎯 Impact
Users cannot update their profile picture, affecting profile customization and user experience.
📌 Title
Profile Image Upload API Returning 500 Internal Server Error
📝 Description
When attempting to upload a profile image from the Edit Profile page, the image upload fails.
The browser console shows:
POST http://localhost:3000/api/upload 500 (Internal Server Error)
Additionally, a UI message appears:
❌ Failed to upload image
This indicates a backend issue with the /api/upload endpoint.
🔄 Steps to Reproduce
Login to the application.
Navigate to Edit Profile.
Click on the camera icon on the profile avatar.
Select an image file.
Observe:
Image does not upload.
Error toast: “Failed to upload image”.
Console shows 500 Internal Server Error.
✅ Expected Behavior
Selected image should:
Be uploaded successfully.
Update the user profile picture.
Return success response (200 OK).No console errors should appear.
❌ Actual Behavior
API returns:
500 Internal Server ErrorImage is not uploaded.
UI displays failure message.
📷 Screenshot
🧠 Possible Causes
Backend upload route misconfigured.
Missing file handling middleware (e.g., multer).
Cloudinary / storage configuration error.
Environment variables not set.
Body parser issue with multipart/form-data.
Incorrect API endpoint URL.
CORS misconfiguration.
File size limit exceeded.
🛠️ Suggested Areas to Check
Backend:
/api/upload route implementation.
File upload middleware configuration.
Environment variables (.env file).
Cloud storage credentials.
Error handling inside upload controller.
Frontend:
Ensure request uses FormData.
Ensure Content-Type is NOT manually set (let browser handle it).
Confirm correct API base URL.
Example (correct frontend pattern):
🚨 Severity
High — Core profile functionality broken.
🏷️ Recommended Labels
bug
backend
api
file-upload
high-priority
🎯 Impact
Users cannot update their profile picture, affecting profile customization and user experience.