Add Option to Upload Profile Picture

[codewarnab]

Currently, on both NGO and USER sides, there is no option to upload the profile picture. We need to add the option to upload a photo in place of the profile icon on the profile page.

Solution:

Frontend (React):

1. Profile Page:
   • Replace the profile icon with an option to upload a photo.
   • Update the profile page to include the feature to upload a photo.

Backend (Django):

1. API Endpoints:
   • Create necessary API endpoints to handle profile picture upload.
   • Implement the necessary backend logic to handle profile picture upload.

Implementation Details:

Frontend (React):

1. Profile Page:
   • Locate the profile icon.
   • Replace the profile icon with an upload photo button.
   • Implement the functionality to upload a photo.
   • Display the uploaded photo in place of the profile icon.

Backend (Django):

1. API Endpoints:
   • Implement API endpoints to handle photo uploads.
   • Create an endpoint to receive the uploaded photo.
   • Implement logic to handle photo upload and storage.

Steps:

Frontend (React):

1. Profile Page:
   • Locate the profile icon component.
   • Replace it with an upload photo button.( Google similar component , discuss before implementing it )
   • Implement the functionality to upload a photo.
   • Display the uploaded photo in place of the profile icon.

Backend (Django):

1. API Endpoints:
   • Create an API endpoint to handle photo uploads.
   • Create a Django model for the user profile to store the uploaded photos.
   • Implement the logic to handle photo upload and storage.

Additional Notes:

• Project Links:
  • Frontend
  • Backend

[shilpashingnapure]

Hi @codewarnab I would like to work on this feature
can you assign this to me under gssoc '24

[Tanishka023]

Heyy!! I am excited to work on this! Please assign to me under GGSoC'24 @codewarnab

[codewarnab]

Hi @codewarnab I would like to work on this feature can you assign this to me under gssoc '24

Assigned ! you can start working on it .
you can share your thoughts also how are you approaching this issue in ui and also for back-end

[codewarnab]

@shilpashingnapure would you like to make the page responsive also for desktops also as you are already gonna work on this issue #269 #273

[shilpashingnapure]

@codewarnab yes, will work on that also

[shilpashingnapure]

@codewarnab I 'm facing issue on backend setup in env , could you please help me on this ?

[codewarnab]

@codewarnab I 'm facing issue on backend setup in env , could you please me on this ?

yes what issue you are facing ? btw for any backend related issue you can create a discussion their or just ask bye mentioning our backend dev @anirbanmajumder0

[shilpashingnapure]

@codewarnab Thank you , I have created discussion for backend setup

[shilpashingnapure]

@codewarnab I'm thinking to do like this

1. frontend -:

   1. we will show default image for all user in initial time
   2. when user on hover to profile img, it will visible upload photo button , on click it will uploaded.
   3. do want to me show crop image and button like save and cancel because normally it will get upload directly?
   4. for uploading img using cloundinary , since its already we are using it. (I was thinking to create new preset for only profile photos) it will be okay ?

2. backend -:

   1. in baseUser adding field like profile_image and by default it will be empty string , will store url(which we get from cloundinary).
   2. for handle profile upload end point -> /profile and passing data (user_email , url)

doubt -:

1. do we have to handle remove image also?
   please let me know any suggestion.

[codewarnab]

@shilpashingnapure looks a great plan do it . sorry for late reply and about remove image we can create a new issue(level3) for that if we want to work on it also we can assign it to you else its not mandatory do it under this issue

[shilpashingnapure]

@codewarnab no problem , I have solved the issue , also did some modification in my plan check this is PR -> #344
and i don't add remove image functionality , if we need this I can work on that also.

[shilpashingnapure]

@rishicds Do we need to add this -> Profile image should be allowed to edit or allowed to upload at time of registration #338
because I haven't handle this at time of registration

[rishicds]

@shilpashingnapure you can create a new issue for that because I feel the work required should get more points than 45.

[shilpashingnapure]

@rishicds okay , then once this PR will get merged after that can I start work on this ?

[rishicds]

Yes @shilpashingnapure