[User Settings] Allow users to modify avatar photo

[kadiealexander]

If you haven’t already, check out our contributing guidelines for onboarding!

---

With the new Settings > Profile page having been added, we need to add some new functionality: Allowing users to modify their avatar.

Deliverables

• Add a button with Edit Photo beneath the avatar on the Settings > Profile page. If this button is pressed we should display two menu options allowing the user to either add the photo or remove it.
• Adding a Photo: Utilize the existing AttachmentPicker component to allow users to select an image to upload. On submission call PersonalDetails.setUserAvatar
• Removing a Photo: Replace the existing avatar with one of our default avatars via getDefaultAvatar

Mobile	Web/Desktop

Platform:

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Expensify/Expensify Issue URL: https://github.com/Expensify/Expensify/issues/154987

[kadiealexander]

Upwork post: https://www.upwork.com/jobs/~017152423e80b99dba

[Regaron]

Hi, @kadiealexander!

I will solve the issue by doing the following:

1. Add a button with Edit Photo beneath the avatar on the Settings > Profile page. When the button is pressed, I will leverage the existing CreateMenu component to display two menu options to either add or delete photos.

It will be done using MENU_ITEMS quite similar to this:

     const MENU_ITEMS = {
            'ADD_NEW_PHOTO': {
                icon: UploadIcon,
                text: 'Add New Photo',
                onSelected: () => this.props.onAttachmentPickerSelected(),
            },
            'REMOVE_PHOTO': {
                icon: DeleteIcon,
                text: 'New Group',
                onSelected: () => this.props.onDeleteAvatar(),
            },
        };

onAttachmentPickerSelected() will leverage the currently existing AttachmentPicker component and open the PickerOptions to upload the picture.

onDeleteAvatar() will be used to replace the existing image with a default avatar from getDefaultAvatar

[Maftalion]

Proposal

• Add button that would user the CreateMenu component
• Add two new values to the MENU_ITEMS for: UPLOAD_PHOTO, DELETE_PHOTO
• For the menuOptions one or both values would be passed in. (I can hide the DELETE_PHOTO option if the avatar is already a default avatar by looking for /images/avatars/avatar in the URL)
• As far as handling the menu item selection, either it can be done with the current setup by passing a prop similar to onAttachmentPickerSelected or I was thinking to just refactor the menuOptions prop to accept an object instead of an array so it would look something like:

menuOptions={{
    [CONST.MENU_ITEM_KEYS.UPLOAD_PHOTO]: {
        onSelected: () => {
            openPicker({
                onPicked: (file) => {
                    // convert selected file to base64
                    PersonalDetails.setAvatar(base64);
                },
            });
        },
    },
    [CONST.MENU_ITEM_KEYS.DELETE_PHOTO]: {
        onSelected: () => {
            const defaultAvatar = PersonalDetails.getDefaultAvatar(login)
            PersonalDetails.setAvatar(defaultAvatar);
        },
    }
}}

[TechCode-R]

Hi Team,
My steps to add this feature:
1- Add Edit Photo button which opens a bottom sheet on mobile apps and dialog on web with 2 options.
2- Design a component with Upload photo & delete photo buttons.
Suggestion: ( We can hide or disable delete photo button if there is already a default avatar)
3- On click upload Image, open camera or gallery and pick image path, type, size etc of selected image and upload it to server using AttachmentPicker component as you suggested.
(Will show image from local path until we get updated imageUrl from the server and cache server image url so we don't need to fetch it again and again for better user experience)
4-On delete remove PersonalDetails.setUserAvatar() value and set default image again.

Thanks 👍

[kaushiktd]

Hi,

This is Kaushik here. I would like to put a solution that actually explain itself instead of copy-pasted coding structure,

1. When press edit photo shows two option in floating same as in screenshot if choose a select new picture, we will upload a new profile image.
2. If remove then, replace the existing profile with the default profile image.

[Maftalion]

The app currently doesn't have an upload icon. When you get a chance, can you send that over? @shawnborton @michelle-thompson

[shawnborton]

Added the icon over on the PR, but for posterity, here it is again: upload.svg.zip