-
-
Notifications
You must be signed in to change notification settings - Fork 3.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Feature Request]: Extend the functionality of the oppia-image-uploader component and remove oppia-thumbnail-uploader #20303
Comments
…#20370) * Rename image-uploader component to image-receiver * remove unused i18n keys and extra states
…#20370) * Rename image-uploader component to image-receiver * remove unused i18n keys and extra states
* Fix part of #20303: Add oppia-image-uploader-modal component * refactor code * add function for invalid tags or attributes * refactor code * make svgString global variable * make previewTitle and description optional * remove unnecessary ngIf * place i18n keys in sorted order
* Fix part of #20303: Add image-uploader component * Add image uploader parameters interface * refactor code * remove comment and use const * remove redundant states * refactor code * make imageBgColor nullable
Closing this as the issue is now fixed by following PRs.
|
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 theoppia-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:
oppia-image-uploader
tooppia-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).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).oppia-image-uploader
component. This is the highest level component which we will use and pass all the props. (PR: Fix part of #20303: Add image-uploader component #20393)Describe alternatives you've considered and rejected
N/A
Additional context
No response
The text was updated successfully, but these errors were encountered: