[$500] Profile - View Profile photo after Uploading new photo shows attachment preview without name for a breif moment

[m-natarajan]

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: 1.3.84-1
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: @ishpaul777
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1697307312806139

Action Performed:

1. Navigate to profile photo.
2. Upload a new profile photo and quickly click on 'View photo" after uploading

Expected Result:

If photo is loading Attachment modal shows loading indicator without showing attachment preview

Actual Result:

View Profile photo after Uploading new photo shows attachment preview without name for a breif moment

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Android: Native

Screen.Recording.2023-10-16.at.4.16.21.AM.mov

Android: mWeb Chrome

Screen.Recording.2023-10-16.at.4.22.06.AM.mov

iOS: Native

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-10-16.at.04.17.37.mp4

iOS: mWeb Safari

Simulator.Screen.Recording.-.iPhone.15.Pro.-.2023-10-16.at.04.19.23.mp4

MacOS: Chrome / Safari

Screen.Recording.2023-10-14.at.11.44.49.PM.mov

Profile.-.View.Profile.photo.after.Uploading.new.photo.shows.attachment.mp4

MacOS: Desktop

Screen.Recording.2023-10-14.at.11.42.31.PM.mov

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0123f3f4476583bca2
• Upwork Job ID: 1713712576697483264
• Last Price Increase: 2023-10-16

[melvin-bot]

Triggered auto assignment to @anmurali (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0123f3f4476583bca2

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

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

[tienifr]

Proposal

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

Profile - View Profile photo after Uploading new photo shows attachment preview without name for a breif moment

What is the root cause of that problem?

We're showing the paperClip icon here if the file is not the image

App/src/components/Attachments/AttachmentView/index.js

Lines 132 to 133 in 0e64161

	const isImage = typeof source === 'number' || Str.isImage(source);
	if (isImage || (file && Str.isImage(file.name))) {

we just set the file when the AttachmentModal is mounted.

App/src/components/AttachmentModal.js

Lines 130 to 136 in 0e64161

	const [file, setFile] = useState(
	props.originalFileName
	? {
	name: props.originalFileName,
	}
	: undefined,
	);

After uploading the new image, we're updating the originalFileName and avatar

App/src/libs/actions/PersonalDetails.js

Lines 422 to 424 in 0e64161

	avatar: file.uri,
	avatarThumbnail: file.uri,
	originalFileName: file.name,

but because the AttachmentModal is already mounted so file is not updated to the new one right after originalFileName get changed

-> When the modal is open file is undefined -> paperClip is shown for a brief moment

Note: Why does this issue happen at the first time users change the avatar?

When users delete the avatar, we don't clear the originalFileName -> file is always the image

App/src/libs/actions/PersonalDetails.js

Lines 480 to 484 in 0e64161

	value: {
	[currentUserAccountID]: {
	avatar: defaultAvatar,
	fallbackIcon: null,
	},

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

we should update the file when the originalFileName get changed in AttachmentModal.js

    useEffect(()=>{
        if(!props.originalFileName) return;
        setFile(props.originalFileName
            ? {
                  name: props.originalFileName,
              }
            : undefined,)
    },[props.originalFileName])

We also need to clear originalFileName here

Result

Screen.Recording.2023-10-16.at.12.19.37.mov

[fedirjh]

We're showing the paperClip icon here if the file is not the image

@tienifr I added a console.log after that line, and it displayed the following result: the file.name is empty, but the source is a blob source, which is a valid source. So, technically, we should display the blob source even if the name is empty, right? why do we need the file.name to display the image?

[tienifr]

@fedirjh Is this the first time you change the avatar? Or can you remove the avatar and logout then login again

[fedirjh]

Is this the first time you change the avatar? Or can you remove the avatar and logout then login again

I removed the personal details and, synced personal details then changed the avatar. I was not able to replicate the bug after the first time avatar change.

So this #29647 (comment) was when the bug occurred .