[Feature Request]: Extend the functionality of the oppia-image-uploader component and remove oppia-thumbnail-uploader

[AFZL210]

Is your feature request related to a problem? Please describe.

So we have a lot of components just to handle image uploads which is confusing. It would be good if we can have a single component to which we can pass props as per our need.

Describe the solution (or solutions) you'd like

The two main components we have right now are (1) oppia-thumbnail-uploader and (2) oppia-image-uploader.

So, the idea is to extend the functionality of the oppia-image-uploader component so we can use this single component in all cases by providing it with the required props and remove the usage of oppia-thumbnail-uploader from the codebase.

oppia-image-uploader component has 3 parts:

1. oppia-image-receiver

This is the component which handles taking images from the user and listens for drag events.

Emitted Events:

• fileChanged(Blob)

Props:

• allowedImageFormats (string[])
• maxImageSize(number(kB))

2. oppia-image-uploader-modal

This component shows the uploaded image, handles cropping, and shows the preview card after cropping (in the case of a topic, story, or subtopic).

Data returned when closed:

• newImageDataUrl(string)
• dimensions({height: number, width: number})
• newBgColor(string)

Props:

• previewImageUrl (optional(string))
• maxImageSize (number)
• aspectRatio (string)
• imageName (string)
• previewDescriptionBgColor (optional(string))
• previewTitle (optional(string))
• previewDescription (optional(string))
• previewFooter (optional(string))
• bgColor (string)
• allowedImageFormats (string[])

3. oppia-image-uploader

This is the highest level component which takes all the props and shows the preview, and handles all the events.

Emitted Events:

• updateFilename(string)
• updateBgColor(string)
• imageSave(Blob)

Props:

• maxImageSize (number)
• aspectRatio (string)
• imageName (string)
• previewDescriptionBgColor (optional(string))
• previewTitle (optional(string))
• previewDescription (optional(string))
• previewFooter (optional(string))
• bgColor (string)
• allowedImageFormats (string[])
• orientation (string) - landscape/portrait
• filename (optional(string))
• disabled (optional(boolean))

The new oppia-image-uploader component should be able to do the following and the oppia-image-uploader-modal can be used on its own where we want to show custom preview:

1. Add support for cropping and aspect ratio check (issue: [BUG]: Add a check for aspect ratio in oppia-thumbnail-uploader component #20291 )
2. Handle multiple images when uploading for the first time (issue: part (a) of [BUG]: Handle multiple images using oppia-thumbnail-uploader component and don't upload image immediately #20292 )
3. Avoid saving images prematurely, i.e., only save images when needed. (issue: part (b) of [BUG]: Handle multiple images using oppia-thumbnail-uploader component and don't upload image immediately #20292 )
4. Use the oppia-image-uploader component in the preferences page and blog dashboard page, and remove the old oppia-thumbnail-uploader component.

Steps

1. rename oppia-image-uploader to oppia-image-reciever as this is just used to take images and check for filetype (PR: Fix part of #20303: Rename image-uploader component to image-receiver #20370).
2. create a new oppia-image-uploader-modal component. this will be used to crop images and show preview (if needed, we only show preview in case of topic, subtopic etc part)
3. create new oppia-image-uploader component. this is the highest level component which we will use and pass all the props.

Describe alternatives you've considered and rejected

N/A

Additional context

No response