Feature: Updating profile picture functionality and UI

[tamalCodes]

Description

Currently, there is no way to update the profile picture that is provided by default so updating it or having an option to do the same would be amazing

since the back end is not yet ready for this the idea is to make sure the front-end flow is ready properly along with some changes to the UI for updating a picture.

Proposed Solution

• We already have a model popping up for editing our profile on our profile page
• We can do the same for the image or we can have the model open up but show the field only for the image that way it would be much more convenient
• The Redux store must also be updated so that it shows the latest data for the image as well

Screenshots

No response

🥦 Browser

Google Chrome

Checklist ✅

• [X] I checked and didn't find similar issue
• [X] I have read the Contributing Guidelines
• [ ] I am participating in JWOC
• [ ] I am participating in IWOC
• [ ] I am willing to work on this issue (blank for no)

[github-actions[bot]]

Hello @tamalCodes, thank you for raising the issue.

Currently, the issue is marked as https://github.com/MilanCommunity/Milan/labels/status%3A%20todo%20%E2%8F%B3 so please wait until the maintainers/owner review it and provide you with feedback/suggestions to proceed further.

Feel free to reach out to Tamal on Twitter, or drop a mail at tamalcodes@gmail.com if you think that this issue is of critical priority.

Give us a ⭐ to show some support Happy OpenSource 🚀

[gaganit1265]

@tamalCodes Can you please add the existing pop up modal

[tamalCodes]

There is no existing modal, we have a modal just for editing a profile

However we do not have any option to update the user's profile picture, so we need to have that. IF you take a look at GitHub, you can go to your github's profile, click on edit, and then you have an edit icon for the profile picture.

On clicking it we have multiple options, an edit button and a remove button which further does the needed action

So I was wondering if we could have something similar for the image in the profile's section

[ndmaratha]

we can use cloudinary for this it will convert the image into the link and then we just have to modify our backend litte much

[tamalCodes]

That can be done, but do i need to pay for it ?

[ndmaratha]

yes according to me cloudynary charge for this , But it is good to store our image as a string in database

[rutupatel53]

can you assign me this task @tamalCodes ?

[tamalCodes]

Sure , go ahead @rutupatel53 . Please react to this message so that I know you are working on the same !