[HOLD for payment 2023-02-13] [HOLD for payment 2023-02-10] [$1000] Profile : Infinite loading spinner appears choosing images with file names has space or special character

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Go to settings > Profile
2. Upload any image which has space or having brackets () in the image file name

Expected Result:

Able to upload without any issue

Actual Result:

Infinite loading spinner appears

Workaround:

unknown

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.2.64-2
Reproducible in staging?: y
Reproducible in production?: n
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
Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/216393900-86df9390-229e-4ecd-aa56-826d8fff2e32.mov

https://user-images.githubusercontent.com/43996225/216393999-0ab8f66c-e86e-47d9-8022-dcf6b87c4393.mp4

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1675312872492999

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~011dbd8a1da41596b4
• Upwork Job ID: 1621583779104563200
• Last Price Increase: 2023-02-03

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

Current assignee @mateocole is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[Pujan92]

Adding same response which I have added here #14266 (comment)

Proposal

This PR seems to raise a regression where we won't able to reach out to Avatar Crop part and the infinite loader will remain on the screen after cleaning the filename.
Reason is uri will be undefined as the file object is overwritten here.

App/src/components/AttachmentPicker/index.js

Lines 39 to 42 in 51f1a77

	file.uri = URL.createObjectURL(file);
	if (file.name !== cleanName) {
	file = new File([file], cleanName);
	}

Screen.Recording.2023-02-03.at.6.39.27.PM.mp4

To solve we need to make an order change that confirms the uri is available which is mandatory to proceed.

diff --git a/src/components/AttachmentPicker/index.js b/src/components/AttachmentPicker/index.js
index dddceb7cf7..dc6573e02c 100644
--- a/src/components/AttachmentPicker/index.js
+++ b/src/components/AttachmentPicker/index.js
@@ -36,10 +36,10 @@ class AttachmentPicker extends React.Component {
 
                         if (file) {
                             const cleanName = FileUtils.cleanFileName(file.name);
-                            file.uri = URL.createObjectURL(file);
                             if (file.name !== cleanName) {
                                 file = new File([file], cleanName);
                             }
+                            file.uri = URL.createObjectURL(file);
                             this.onPicked(file);

Screen.Recording.2023-02-03.at.6.39.48.PM.mov

[dhairyasenjaliya]

I think this is regression from #14266 which is still in regression period should be handled there

[thesahindia]

@MonilBhavsar the proposal looks good to me

C+ reviewed 🎀👀🎀

[thienlnam]

Monil is offline, so I will take over on this issue

[mountiny]

Keeping this open to pay out cc @mateocole

[mateocole]

Still need C+ and issue reported to apply to the upwork link!

https://www.upwork.com/jobs/~011dbd8a1da41596b4

[gadhiyamanan]

@mateocole applied

[Pujan92]

Regression Test Proposal

• Go to the profile page
• Choose upload photo
• Select any pic with special char in file name
• Verify that it proceeds and loading spinner won't turn out to be infinite

[thesahindia]

Still need C+ and issue reported to apply to the upwork link!

https://www.upwork.com/jobs/~011dbd8a1da41596b4

It's not available anymore.

[thesahindia]

Regression Test Proposal

• Go to the profile page
• Choose upload photo
• Select any pic with special char in file name
• Verify that it proceeds and loading spinner won't turn out to be infinite

It looks good to me. I think we should also add an example in the third steps

"Select any pic with special char in file name e.g. test(1).png"

[mateocole]

try here https://www.upwork.com/jobs/~019299c196286e1e4a @thesahindia

[thesahindia]

try here https://www.upwork.com/jobs/~019299c196286e1e4a @thesahindia

Thanks! Applied

[mateocole]

Ok thx!

[gadhiyamanan]

@mateocole reporting bonus is pending

[Pujan92]

@mateocole reporting bonus is pending

@mateocole same(payment pending) for me.

[thesahindia]

Also the 50% bonus is due @mateocole!

[@mateocole] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

I think this action is also pending.

Regression Test steps -

1. Go to the profile page
2. Choose upload photo
3. Select any pic with special char in file name e.g. test(1).png
4. Verify that it proceeds and loading spinner won't turn out to be infinite

[Pujan92]

@mateocole quick bump!

[gadhiyamanan]

@thienlnam can you please reopen the issue as payment is pending here
cc: @mateocole

[MelvinBot]

📣 @gadhiyamanan! 📣

Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
2. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
3. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.

Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[gadhiyamanan]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01b6fd34f946454a68

[MelvinBot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[thienlnam]

Pinged Matt to take care of payment on this issue!

[mateocole]

Okay, apologies with the multiple jobs on this. All paid and bonuses paid.