Implement CDN for Image Uploads to Support Image Polls

[priymavani]

Schema Update

• Updated poll_options schema to include an imageUrl field for storing image references.

Env Modified to Include Cloudinary Variables in Backend

• CLOUDINARY_CLOUD_NAME
• CLOUDINARY_API_KEY
• CLOUDINARY_API_SECRET

Dependencies

• Updated package.json and package-lock.json to include cloudinary and multer dependencies for image upload and management.

Image Upload Infrastructure

• Added multer middleware for file uploads with validation and error handling.
• Created Cloudinary configuration and utility functions for uploading and deleting images.
• Implemented new endpoints:
  • POST /upload-image: Uploads an image to Cloudinary.
  • DELETE /delete-image/:public_id: Deletes an image from Cloudinary by its public ID.
• Enhanced file upload handling with local file cleanup after upload.

Postman Guide

Request Details:

• Method: POST
• URL: http://localhost:8008/upload-image

Headers:

• Content-Type: multipart/form-data
• Body:
  • Form-data:
  • Key: image
  • Type: File
  • Value: Select your image file

Request Details:

• Method: DELETE
• URL: http://localhost:8008/delete-image/:public_id
• variable public_id - poll_images/xdxuxxmujd38t96akxjb

Headers:

• Content-Type: application/json

more

This public_id will get from Cloudinary account

Component Enhancements

• GenericCheckboxGroup: Refactored to improve checkbox handling and mapping logic; updated selectedItems management to use object comparison.
• ImagePoll: Added a new component for image poll creation with features for adding, removing, and updating options with images; integrated Cloudinary and added validation.
• CreatePoll: Enhanced to support image polls with validation for options and image uploads; improved error handling and user feedback with detailed error messages.
• ResultPoll: Updated to display poll options with image URLs; improved result conversion logic and added error handling for missing data.
• ResultSlider: Modified to conditionally display images for poll options; enhanced error handling and progress bar styling.
• SharePoll: Refactored to improve checkbox handling for multiple selections; mapped selectedItems to text values and updated UI to support poll options with images.

Purpose

These changes enable users to create and share polls with image options, leveraging Cloudinary for scalable image storage and multer for secure file uploads. The refactored components improve performance, usability, and reliability while maintaining a consistent UI.

Testing

• Tested image upload and deletion via POST /upload-image and DELETE /delete-image/:public_id.
• Verified poll creation with image options in CreatePoll and display in ResultPoll and ResultSlider.
• Confirmed error handling for invalid uploads, missing data, and failed API calls.
• Validated UI updates across all affected components.

poll.mp4