Hi @AFZL210, thanks for proposing this as a good first issue. I am removing the label for now and looping in @DubeySandeep to approve the label. It will be added back if approved. Thanks!

Task Overview:
The task involves removing redundant image upload-related components and replacing them with the newly created oppia-image-uploader and oppia-image-uploader-modal components. This includes updating modals and editor tabs, modifying the backend handler to support a new image field, and updating the frontend service to handle this new field.

Approach:
Replace oppia-thumbnail-uploader with oppia-image-uploader or oppia-image-uploader-modal in the respective components and modals.
Update the backend handler to add a new image field of type bytes and adjust request handling.
Update the frontend backend service to include the new image field.
Write tests for the new components and modals, and ensure that the image data is saved and retrieved correctly.
Clean up deprecated components and update documentation.
Please assign this issue to me, and let me know if there are any additional guidelines or details I should be aware of.

Thanks!
Nabanita

@Nabanita29 The approch sounds good.

I'm assigning you the create new topic modal part.

Note: For now just replace the old component with new one don't delete the old component code now, we will remove it once we have fully replaced the old one.

Setps to create a topic:

1. Click on profile icon > Admin
2. Go to roles tab and enter your username and assign yourself curriculum admin role
3. Go to home > click on profile icon > topic and skills dashboard
4. Click on create topic

Here you will the the image uploader component this is the one which you have to replace.

Hi may i know is this issue resolved ,I want to try this out

@sankshaypusa This issue is still open, if you want to work on it just tell me which sub-part you would like to work and Per the usual guidance at https://github.com/oppia/oppia/wiki/Contributing-code-to-Oppia#choosing-a-good-first-issue, please provide proof that you are able to solve the issue locally. If it looks good, we can assign you to this issue.

Please also follow the other instructions on that wiki page if you have not yet done so. Thanks.

Unassigning @Nabanita29 due to inactivity.

HI AFZL210 thanks for your response i would like to work on the Create new subtopic modal and I am new to open-source contribution and would like to solve this issue,I will provide proof of the solution as well

@sankshaypusa Yes sure, you can start working on it and once it's fixed I will assign it to you.

Hi AFZL210 I would like to know what result you expect from this issue, do we need any admin privileges to access?

Hi @HardikGoyal2003 ,

I hope this message finds you well. I would like to request assignment for the issue regarding the use of image-uploader and image-uploader-modal to handle image uploads (#20564).

Files to be Changed:-
Create New Topic Modal: create-new-topic-modal.component.ts
Topic Editor Tab: topic-editor-tab.directive.ts
Create New Subtopic Modal: create-new-subtopic-modal.component.ts
Subtopic Editor Tab: subtopic-editor-tab.component.ts

I understand that the task involves replacing the oppia-thumbnail-uploader with the new components and updating the backend handler and frontend service accordingly. I am eager to contribute to this issue and will ensure to follow the guidelines and provide proof of the solution as required.

Thank you for considering my request. I look forward to your response.

Best regards,
Kartik Suryavanshi

Hey @KartikSuryavanshi, could you please specify the changes for one file, including the lines you’ll modify and the new content? Thanks!

Hey @seanlip
Changes in create-new-topic-modal.component.html:-
Lines to modify:
I will be replacing the oppia-thumbnail-uploader component with the new image-uploader component in the template file associated with this modal. Here’s a breakdown of the specific changes:

Before:
for example :-

<oppia-thumbnail-uploader
(updateFilename)="updateTopicThumbnailFilename($event)"
[useLocalStorage]="false"
[bgColor]="editableThumbnailBgColor"
(updateBgColor)="updateTopicThumbnailBgColor($event)"
[allowedBgColors]="allowedBgColors"
[aspectRatio]="'4:3'"
[previewTitle]="newlyCreatedTopic.name"
previewDescriptionBgColor="#BE563C">

After:-
<image-uploader
[maxImageSizeInKB]="1024"
[aspectRatio]="'4:3'"
[imageName]="newlyCreatedTopic.name"
[bgColor]="'#fff'"
[allowedImageFormats]="['jpg', 'png']"
(imageSave)="onImageSave($event)">

Explanation:
Component Replacement: The oppia-thumbnail-uploader has been replaced with image-uploader to use the new implementation for image uploads.
Input Properties: The new component includes properties for maximum image size, aspect ratio, image name, background color, and allowed formats.
Event Handling: The event (imageSave) is maintained to handle the saved image when uploaded.

Hey @KartikSuryavanshi, could you provide a video demo showing that this implementation works correctly with the feature? If everything is functioning well, I'd be happy to assign you this issue. Thanks!

Hey @HardikGoyal2003 i made the changes and the new thumbnail uploader is working quite good!!

Uploading Screen Recording 2024-10-01 at 12.mp4…

Hey @KartikSuryavanshi I don't see any video demo, I think it isn't uploaded properly, kindly check. Thanks!

Hey @HardikGoyal2003 i tried doing many attempts but it shows uploading .Can u check the below link!!
https://github.com/user-attachments/assets/e2d6ecb8-d9cc-44e2-b538-43ee0bc12605

Hey @KartikSuryavanshi This looks good, feel free to make a Pr, assigning this issue to you!! Thanks!

Hey @HardikGoyal2003 ,

Thank you for assigning the issue to me! I will begin working on it right away and create a PR shortly. I'll keep you updated with my progress.

Hey @HardikGoyal2003,

I'm facing persistent linter issues, and despite my attempts to fix them, the errors keep appearing. The main issues highlighted are related to:

Trailing whitespaces (e.g., lines 28, 119, and 120 in the HTML file).
Comment formatting in the TypeScript file (line 28).
I've tried removing the whitespaces and correcting the comments, but when I run the linter again, it still fails. Additionally, when I try to use git stash to clear my repo, the changes get reset, and the same whitespace and comments reappear.

I’ve attached a screenshot for reference. Could you please help me figure out why these issues keep coming back and what I can do to resolve them?

Thanks in advance for your help!

@KartikSuryavanshi Whitespace characters remain and haven't been fully removed. Please verify the specified position for any whitespace. Also, comments should begin with a capital letter and end with a period. Let me know if this issue persists.

Hey @HardikGoyal2003
Thank you for your feedback. I’ve attempted multiple times to remove the whitespace characters, but I keep encountering an issue where it prompts me to stash my changes. After doing that, the same whitespace issue reappears when I proceed.It also says "Your repo is in a dirty state which prevents the linting from working".

I’ll continue troubleshooting, but please let me know if there are any suggestions for resolving this.

Hey @KartikSuryavanshi, the issue is that after you remove your changes, you're not using git add before committing or pushing. Please try that to see if it resolves the problem!

Hey @HardikGoyal2003 Plz have a look!!

Hey @KartikSuryavanshi, look at the second image at the top center. It displays a modified file marked in red, indicating it hasn’t been added yet, which is causing the error.

Okay, I’ll check that out! Thanks for pointing it out.I will keep u updated!

Hey @HardikGoyal2003

This error continues to appear based on the code I've provided in the picture below. What changes should I make in lines 117 and 118?

@KartikSuryavanshi Move the pointer after the comma on line 117 and press the right arrow key. If the pointer moves to the next line, there is no whitespace; otherwise, you'll find out a whitespace there.

Hey @HardikGoyal2003 Can u help me with this issue?

Hey @HardikGoyal2003 Can u help me with this issue?

@jayam04 @gp201 PTAL!! Thanks!!

Hey @HardikGoyal2003 plz help with this linting issues!!

@KartikSuryavanshi Are you using tabs instead of spaces? In general you should use spaces everywhere.

Also usually you'll want to put [previewTitle] just a single space after the tag name (and align everything else to that).

Hey @KartikSuryavanshi Are you working on this or should I unassign this??

Hey @HardikGoyal2003,

I wanted to clarify that this issue needs to be addressed in parts, as @AFZL210 mentioned. Here’s a breakdown of the components that require changes:

Create New Topic Modal: create-new-topic-modal.component.ts
Component used: oppia-thumbnail-uploader

Topic Editor Tab: topic-editor-tab.directive.ts
Component used: oppia-thumbnail-uploader

Create New Subtopic Modal: create-new-subtopic-modal.component.ts
Component used: oppia-thumbnail-uploader

Subtopic Editor Tab: subtopic-editor-tab.component.ts
Component used: oppia-thumbnail-uploader

For now, I will replace the old component with the new one but do not delete the old component code just yet. We can remove it later once we’ve fully transitioned to the new one.

However, I encountered an issue when implementing a function to listen to the imageSave event—it seems to break the topic editor. I will need some time to dig deeper into this issue and would appreciate any guidance you can provide.

Thanks!

@KartikSuryavanshi Retaining the old code complicates maintenance. We need to address this together. If you need assistance, please share the stack trace of the error for better clarity!

Hi @HardikGoyal2003,

Thank you for your feedback! I understand the importance of maintaining clean code. I will gather the stack trace of the error and provide it shortly for better clarity on the issue.

For some reason @KartikSuryavanshi is assigned to this issue but his PR hasn't been worked on for ages: #21036. Deassigning him.

@KartikSuryavanshi If you are not working on an issue, please deassign yourself. Don't leave issues hanging, because that also blocks them for new contributors. Thanks.

@seanlip Apologies for the delay. I'll ensure to deassign myself from issues I'm not actively working on in the future. Thanks for pointing it out!

Hi,
I'm having some issues regarding the implementation of onImageSave that I must add in create-new-topic-modal.component.ts. To save the image in the imageLocalStorageService,

• I change the blob from a raw file from the modal component, and call saveImage with that new data, but it's probably not the component's original purpose to do such things
• I write a new function in the image-local-service allowing me to save an image using a blob, there the transition from blob to raw file is done within that function.
• I use the _blobtoBase64 function that does precisely what I want, that would need to make it a public function instead of a private one, which is probably not the best idea since i'm guessing it's private for a reason

Which one do you think is the best?
Also, regardless of the solution I choose, console errors come up saying that "String contains an invalid character". This error is triggered by getStoreedImagesData() when an image has been saved in the topic creator modal, but I don't understand where that comes from.
When I upload a random image and I print the raw image value of it, it displays "PHN2ZyB2ZXJzaW9uPSIxLjAiIHhtbG5zPSJodHRwO.....and so on". Can you also help me understand why that error appears?

@torack51 I think the second one is the best, although it might be worth looking into why we seem to be saving images to local storage in different ways throughout the app. Is there any possibility for standardization, so that all the callers of the image local storage service use a single approach?

I'm not sure if I can give you much guidance on the last question, it will probably need more debugging. If you still have trouble, please put all the relevant information (including repro steps and things you've tried) in a debugging doc and we can take a look. Thanks!

Hello @seanlip , sorry for the late reply but my devserver stopped working, similarly to this discussion topic : https://github.com/oppia/oppia/discussions/21158.
I managed to solve the console issues I mentioned before, and I can also suggest eventually another solution to the dilemma I talked about in my last message : emit imageSave with image_data as a raw string rather than a blob, which is very possible since newImageDataUrl is the correct format in the following code, even though we use imageBlobData in imageSave.emit as you can see here-->

Thanks @torack51. Did you get a solution to the "devserver stopped working" issue? If so, it would be helpful if you could post it in the discussion thread since other folks seem to be having trouble as well.

Other than that, it would be great to hear more about your analysis and your progress -- I think it's worth cataloguing the different instances where we save images and what their differences are, and proposing how you plan to standardize them. Thanks for keeping the thread updated!