Cloudinary removes the need to develop and maintain complex image and media processing logic in-house. Enatega needs to run it for simplicity in operations.
1.1.
Sign up for Cloudinary account
-
Visit Image and Video Upload, Storage, Optimization and CDN and sign up for a free Cloudinary account
-
Fill out your name, email, company details, and agree to terms of service
-
Check your email for account verification link
1.2.
Configure API details
-
After signing in, go to "Dashboard" and select "API Settings"
-
Copy and save your "Cloud Name", "API Key", and "API Secret" values securely
1.3.
Install Cloudinary SDK
-
In your app folder run npm install cloudinary to install Cloudinary SDK
-
Import Cloudinary module in app.js file
1.4.
Configure Cloudinary
-
Create config/cloudinary.js file to hold Cloudinary credentials
-
Export Cloudinary instance with your Cloud Name, API Key, API Secret
-
Import Cloudinary config in app.js
1.5.
Install File Upload capability
-
Run npm install multer cloudinary-storage to support file uploads
-
Import Multer and Cloudinary storage in app.js
1.6.
Configure Multer storage
-
Create uploader instance with Cloudinary storage config
-
Specify folder name, allowed formats, resize options
-
Export uploader for route handlers
1.7.
Create Upload Route
-
Add POST route to handle file upload request
-
Use Multer's single() method to upload file
-
Pass file to Cloudinary uploader.upload() to store
1.8.
Display Uploaded Images
-
Create Image model to store public_id from uploads
-
Render images from database on profile/gallery
-
Configure Cloudinary transformations as needed
1.9
Testing Upload Feature
- Add UI for selecting/submitting image
- Ensure uploads are processed and stored on Cloudinary
- Images can be rendered back from MongoDB