[Feature Request]: Implement Image Upload Functionality Using Cloudinary

[ShivanshPlays]

Is there an existing issue for this?

• I have searched the existing issues

Feature Description

Issue Overview

To enhance the blog creation experience, I propose implementing an image upload feature using Cloudinary. This feature will allow users to upload and embed images in their blogs, significantly improving the visual appeal of the content.

With Cloudinary’s secure, scalable media management, we can ensure a smooth and reliable experience for users while minimizing the complexity of handling image uploads on the client-side.

---

Scope of Work

1. Cloudinary Integration:

   • Add required API keys to the environment variables for security, after the pr the maintainers can add the env keys for production in netlify

2. Image Upload Component:

   • Build a React component to handle file uploads.
   • Provide drag-and-drop functionality or a file picker for convenience.

3. Upload Handling:

   • Implement logic to upload images directly to Cloudinary using its SDK or REST API.
   • Display a loading indicator during the upload process to improve user feedback.

4. Preview and Embed:

   • Provide an image preview feature before submission.
   • Retrieve the Cloudinary URL after a successful upload and store it with the blog content.

5. Error Handling:

   • Use React-Hot-Toast to display error messages for failed uploads.
   • Handle common issues such as file size limits and unsupported formats gracefully.

Use Case

• Improved User Experience: Users can enhance their blog posts with images, making the content more engaging.
• Seamless Media Management: Cloudinary provides easy access to uploaded images and offers tools for image optimization.
• Reduced Backend Complexity: With Cloudinary handling the uploads, there is no need to store and manage images directly within the application.

Benefits

No response

Add ScreenShots

No response

Priority

High

Record

• I have read the Contributing Guidelines
• I'm a GSSOC-EXT contributor
• I'm a HACKTOBERFEST contributor
• I have starred the repository

[ShivanshPlays]

@jeevan10017 please review and assign.

[jeevan10017]

@jeevan10017 please review and assign.
Go for it👍