[BUG]: Add a check for aspect ratio in oppia-thumbnail-uploader component

[AFZL210]

Describe the bug

We have all the checks like file size, extension present, which we mention in the image prerequisite section. We also mention what aspect ratio image should be uploaded, but we don't have a check for that, which might create UI issues.

URL of the page where the issue is observed.

http://localhost:8181/topics-and-skills-dashboard

Steps To Reproduce

1. Go to any page which uses the oppia-thumbnail-uploader component like topic and skill dashboard
2. Upload an image of 16:9 aspect ratio

Expected Behavior

An error should be thrown if the user uploads an image with an aspect ratio that is not specified. and show correct preview image as per aspect ratio. and also allow users to crop the image while maintaining the aspect ratio like we have in the preferences page.

Screenshots/Videos

2024-05-10.20-17-49.mp4

What device are you using?

Desktop

Operating System

Linux

What browsers are you seeing the problem on?

Other

Browser version

1.62.156 (Brave)

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Then, please leave a comment with details of the approach that you plan to take to fix the issue (see example).

Note: If this is your first Oppia issue, please make sure to follow our guidelines for choosing an issue and setting things up. You will also need to show a demo of the fix working correctly on your local machine. Thanks!

[seanlip]

@AFZL210 It might be hard for an image creator to make an image with the exact ratio. Can we let them zoom and/or crop the image in the browser instead (like I think we might do for the Preferences page image) so that, when saved, it has the right aspect ratio?

[AFZL210]

@AFZL210 It might be hard for an image creator to make an image with the exact ratio. Can we let them zoom and/or crop the image in the browser instead (like I think we might do for the Preferences page image) so that, when saved, it has the right aspect ratio?

Yes absolutely, I will update the issue description.