feat: fix image persistence by migrating from local storage to Cloudinary#216
Open
momanamjad wants to merge 3 commits into
Open
feat: fix image persistence by migrating from local storage to Cloudinary#216momanamjad wants to merge 3 commits into
momanamjad wants to merge 3 commits into
Conversation
- Add api/cloudinary.js with CloudinaryStorage config - Update api/routes/upload.js to return Cloudinary URL - Update Write.js to store returned Cloudinary URL as photo - Update Post.js to render photo URL directly - Update SinglePost.js to render photo URL directly - Add CORS headers to api/index.js - Add .env.example with required Cloudinary env var keys - Remove local multer/diskStorage from index.js Fixes image persistence on Vercel/Heroku deploys
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
The app used
multer.diskStorage()to save uploaded images to alocal
/imagesfolder on the server. This causes all images todisappear on every Heroku/Vercel/Render deploy because these
platforms use ephemeral filesystems that reset on restart.
Solution
Replaced local disk storage with Cloudinary. Images now upload
directly to Cloudinary's CDN and a permanent HTTPS URL is stored
in MongoDB instead of a filename.
Changes
api/cloudinary.js— new Cloudinary + multer config (new file)api/routes/upload.js— returns Cloudinary URL instead of filenameapi/index.js— removed local multer/diskStorage, added CORSclient/src/pages/Write.js— stores res.data.url as post photoclient/src/components/Post.js— renders photo URL directlyclient/src/pages/SinglePost.js— renders photo URL directlyapi/.env.example— documents the 3 required Cloudinary env varsHow to test