feat: implement cloud-based image uploads for shops and products

[DeveloperZeeshu]

📝 Description

Implement a robust image upload system to allow Shop Owners to showcase their business and products. To maintain database performance, images will be stored in a cloud provider (Cloudinary/S3) rather than as binary data in MongoDB.

🎯 User Story

As a Shop Owner, I want to upload high-quality images of my shop and products so that Users can visually discover and compare items nearby.

🛠 Technical Tasks

• Set up Cloudinary or AWS S3 bucket and API credentials.
• Implement multer middleware in the Express backend for multipart/form-data.
• Update Shop and Product MongoDB schemas to include imageUrl and publicId.
• Create a reusable ImageUpload component in React with:
  • File validation (size < 5MB, format: jpg/png).
  • Client-side image preview using URL.createObjectURL.
• Integrate loading states and error handling for slow uploads.

✅ Acceptance Criteria

• Images are successfully uploaded to the cloud and URLs are stored in MongoDB.
• Shop/Product cards on the user side render the uploaded images.
• Uploading a new image deletes the old one from the cloud (to save storage).

🏷 Tags

feature backend frontend enhancement storage