[$250] Settings - Take photo option is missing for uploading a profile avatar image

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 9.0.19-10
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4852296&group_by=cases:section_id&group_id=229064&group_order=asc
Issue reported by: Applause - Internal Team

Action Performed:

1. Navigate to https://staging.new.expensify.com/
2. Log in with a new Gmail account
3. Tap on "Account settings"
4. Tap on the avatar

Expected Result:

I should be able to take a photo for the avatar

Actual Result:

Take photo option is missing for uploading a profile avatar image. The gallery opens
Samsung Galaxy A52s 5G

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6571262_1723575751018.az_recorder_20240813_205131.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011cd8972e087510c8
• Upwork Job ID: 1826240108874477245
• Last Price Increase: 2024-08-28

Issue Owner

Current Issue Owner: @mollfpr

[melvin-bot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[lanitochka17]

@JmillsExpensify FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[lanitochka17]

We think that this bug might be related to #vip-vsp

[daledah]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Take photo option is missing for uploading a profile avatar image. The gallery opens

What is the root cause of that problem?

• In AvatarWithImagePicker component, we are using AttachmentPicker with type is CONST.ATTACHMENT_PICKER_TYPE.IMAGE:
  

  App/src/components/AvatarWithImagePicker.tsx

  Line 338 in f2dad3a

  <AttachmentPicker type={CONST.ATTACHMENT_PICKER_TYPE.IMAGE}>

• With this, we use use input html tag with accept prop is image/*:
  

  App/src/components/AttachmentPicker/index.tsx

  Line 14 in f2dad3a

  return 'image/*';

• And in android chrome, using input with accept: "image/*" will not show "Take photo" option.

What changes do you think we should make in order to solve the problem?

• In general, we should use the input element without the accept attribute on Android Chrome to ensure that the "Take photo" option is available. However, this approach can lead to the "Choose a file" option displaying unexpected file types. To address this, we need to implement a mechanism that throws an error if the user selects a file type that is not expected. Detail below.

1. Return undefined if it is android chrome:
   

   App/src/components/AttachmentPicker/index.tsx

   Line 10 in f2dad3a

   if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE) {

    if (type !== CONST.ATTACHMENT_PICKER_TYPE.IMAGE || Browser.isMobileChrome()) {

2. Adding a validation logic to:
   

   App/src/components/AttachmentPicker/index.tsx

   Line 40 in f2dad3a

   const file = e.target.files[0];

                    // Check if the selected file is an image
                    if (type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE && file && !file.type.startsWith('image/')) {
                        // Show an alert if the file is not an image
                        alert('Please select an image file.');
                        // Reset the file input value
                        if (fileInput.current) {
                            fileInput.current.value = '';
                        }
                        return;
                    }

What alternative solutions did you explore? (Optional)

• In validation logic, when throw error, we can display a modal instead of alert.

[melvin-bot]

@JmillsExpensify Huh... This is 4 days overdue. Who can take care of this?

[JmillsExpensify]

Will open up the issue for proposals since this is possible on native mobile

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~011cd8972e087510c8

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @mollfpr (External)

[melvin-bot]

@JmillsExpensify, @mollfpr Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

@JmillsExpensify @mollfpr this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[JmillsExpensify]

Still open for proposals. I'll keep it open though I don't think it's worth a higher price so keeping that the same.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[mollfpr]

I can reproduce the issue with a physical device, not with the emulator.

The RCA from @daledah seems correct and it's a known bug that was reported https://issuetracker.google.com/issues/317289301.

@daledah Is the step 2 in your solution is a must? I think we already have the validation with the file type for avatar.

[daledah]

Is the step 2 in your solution is a must? I think we already have the validation with the file type for avatar

I believe we need to keep it. Without it, an error message appears below the avatar field whenever an incorrect file is selected.

[mollfpr]

I believe we need to keep it. Without it, an error message appears below the avatar field whenever an incorrect file is selected.

@daledah I think it's okay for now, as long the incorrect file didn't get uploaded.

Let's go with @daledah proposal without validation.

🎀 👀 🎀 C+ reviewed!

[melvin-bot]

Triggered auto assignment to @puneetlath, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @daledah You have been assigned to this job!
Please apply to the Upwork job and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Once you apply to this job, your Upwork ID will be stored and you will be automatically hired for future jobs!
Keep in mind: Code of Conduct | Contributing 📖

[daledah]

@mollfpr PR is ready.

[melvin-bot]

This issue has not been updated in over 15 days. @JmillsExpensify, @puneetlath, @mollfpr, @daledah eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[puneetlath]

@mollfpr @daledah what's the status of this? Is it done?

[mollfpr]

It seems the automation has failed to update the status. The PR is deployed to the production on 6th September, and there's no deploy blocker linked to the issue. So it's ready for the payment.

[@mollfpr] The PR that introduced the bug has been identified. Link to the PR:
[@mollfpr] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:

No offending PR

[@mollfpr] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

The regression step should be good!

[@mollfpr] Determine if we should create a regression test for this bug.
[@mollfpr] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Login to the App
2. Navigate to "Account settings"
3. Tap on the avatar
4. Verify that: Take photo option is shown
5. 👍 or 👎

[puneetlath]

Payment summary:

• C - $250 - @daledah - to be paid via Upwork
• C+ - 250 - @mollfpr - to be paid via NewDot

@daledah I don't see a contract for you for this issue. Can you link me your Upwork profile?

[garrettmknight]

$250 approved for @mollfpr

[daledah]

Can you link me your Upwork profile?

@puneetlath Here's mine https://www.upwork.com/freelancers/~0138d999529f34d33f

[puneetlath]

@daledah offer sent here: https://www.upwork.com/nx/wm/offer/104289314

Please ping me on this issue when you've accepted.

[puneetlath]

@daledah bump!

[daledah]

@puneetlath Sorry for not letting you know here, I accepted it

[puneetlath]

All paid. Thanks y'all!