[BUG] Client-Side Image Compression before Cloudinary Upload

[knoxiboy]

Problem Statement

When users attach large photos directly from their cameras (e.g. 5MB-10MB), uploading them to Cloudinary fails due to payload limit restrictions or takes too long, resulting in failed uploads or high bandwidth cost.

Proposed Solution

Implement client-side image compression:

1. In frontend/src/store/useChatStore.js (or a utility file), intercept image selection.
2. Use the HTML5 Canvas API or a lightweight utility like browser-image-compression to resize images (e.g. max width 1200px) and convert them to webp format.
3. Compress the image to less than 500KB before encoding as base64 and uploading.

Alternatives Considered

Increasing backend body-parser limits, but this wastes user bandwidth and slows down chat message delivery.

Additional Context

Level: Intermediate
Affected Files: frontend/src/store/useChatStore.js, frontend/package.json

Can you please assign this issue to me? I would like to work on this.

[knoxiboy]

/assign gssoc
@UTKARSHH20 please assign this issue to me.....