Feat: Set Up Cloudinary for Universal Image Upload Functionality

[samar12-rad]

Describe the feature

Description: We need to integrate Cloudinary for handling image uploads across the cafe website, ensuring a scalable and reusable solution that can be used for various features. This API will allow for future functionality, such as adding images to event creation, user profile editing, and other media-related needs. The implementation should be universal and not restricted to any single part of the website.

Tasks:
Install and Configure Cloudinary:
Install the Cloudinary SDK in both the backend and frontend if necessary.
Create a Cloudinary account and configure API keys in a .env file to keep them secure.
Set up Cloudinary configurations (e.g., API secret, API key, cloud name) on the server.

Develop a Universal Image Upload API:
Implement a reusable API endpoint to handle image uploads. This API should:
Accept file uploads (e.g., images from forms).
Integrate with Cloudinary for storing and managing images.
Return the uploaded image's URL for storage in the database.

Ensure that this API can be used for multiple features, including:
Event creation (upload event banners or images).
User profile page (upload profile pictures).
Future features that require image management.

Client-Side Integration:
Create a frontend utility function that can call the image upload API whenever needed.
Add file input handling for event creation and profile editing forms to allow users to upload images.
Display a preview of the image after it is selected for upload (optional).

Database Integration:
Ensure the URLs of uploaded images are stored correctly in the database for their respective features.
Adjust the existing database schema if necessary to accommodate these image links (e.g., events and user profiles).

Validation and Error Handling:
Add proper validation for image uploads:
Restrict file types to valid image formats (e.g., JPEG, PNG).
Set file size limits.
Handle errors gracefully on both frontend and backend, providing feedback to users (e.g., if an image fails to upload or is too large).
Secure the upload endpoint by verifying that only authenticated users can upload images (relevant for profile editing).

Testing and Deployment:
Test the API thoroughly for different scenarios (successful upload, invalid file types, large file sizes).
Ensure images are correctly uploaded to Cloudinary and the correct URLs are returned.

Additional Considerations:
Plan for handling multiple image uploads in the future if needed (e.g., for galleries).
Ensure security and privacy around images uploaded by users (especially profile pictures).
Keep API endpoints extensible for future media-related features.

Add ScreenShots

Record

• I agree to follow this project's Code of Conduct
• I have starred the repository
• I'm a gssoc-24-extd contributor
• I want to work on this issue

[github-actions]

Thank you for creating this issue! 🎉 We'll look into it as soon as possible. In the meantime, please make sure to provide all the necessary details and context. If you have any questions or additional information, feel free to add them here. Your contributions are highly appreciated! 😊

You can also check our CONTRIBUTING.md for guidelines on contributing to this project.
for more information join our discord https://discord.gg/Jh3bWQ7FRN

[RamakrushnaBiswal]

good idea @samar12-rad

[harshbhar0629]

@RamakrushnaBiswal Can i work on this issue..?

[RamakrushnaBiswal]

@harshbhar0629 yes you can

[github-actions]

Hello @samar12-rad! Your issue #319 has been closed. Thank you for your contribution!🚀