[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:

Steps

Here is the fixed list format in Markdown:

• 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).
• Create a new oppia-image-uploader-modal component. This will be used to crop images and show a preview (if needed, we only show a preview in the case of topic, subtopic, etc.) (PR: Fix part of #20303: Add oppia-image-uploader-modal component #20375).
• Create a 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