[HOLD for payment 2021-11-22] Profile - Uploading a non-image file will show infinite loading and blocks the user from uploading a new profile picture

[isagoico]

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. Navigate to settings
2. Click on Profile
3. Click on the edit icon in the avatar
4. On the file browser, select to display all files
5. Select a non-image file

Expected Result:

There should be a message about a invalid file uploaded.

Actual Result:

There's an infinite loading displayed under the avatar icon. No option to upload a new image is displayed.

Workaround:

None found. Refreshing doesn't fix the issue. Only logging out and back will remove the infinite loading.

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.3-0

Reproducible in staging?: yes
Reproducible in production?: yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

prfile.mp4

Expensify/Expensify Issue URL:

Issue reported by: @Hanaffi
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1632870641227600

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @yuwenmemon (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[PrashantMangukiya]

Proposed Solution: (If considered as external)

There are two problem here:

First is Non Image file (e.g. txt) Uploaded:
i.e. Whenever Non Image file uploaded at that time API.User_UploadAvatar() api throws error as
{jsonCode: 404, message: 'Invalid file. Please try a different image.', requestID: '69771aaa7f83697d-YVR'}
OR Sometimes return response within .then() block as
{jsonCode: 502, message: 'PDF Box can not upload user asset, requestID: '69771c200bbe31d0-YVR'}

I am not sure why sometime api throw error with {jsonCode: 404, ... } OR Sometime returns response with {jsonCode: 502, ... }. May be server side issue or maintenance. So I suggested solution that will handle all situation.

Second is Unsupported Image Uploaded:
i.e. Whenever SVG image Uploaded at that time API.User_UploadAvatar() returns response within .then() block as
{jsonCode: 502, message: 'PDF Box can not upload user asset, requestID: '69771c200bbe31d0-YVR'}

So in both case it goes to loading state because we are just handling (response.jsonCode === 200) and there is no .catch() block within setAvatar() action in src/libs/actions/PersonalDetails.js file as shown under:

App/src/libs/actions/PersonalDetails.js

Lines 273 to 281 in fa7cb60

	function setAvatar(file) {
	setPersonalDetails({avatarUploading: true});
	API.User_UploadAvatar({file}).then((response) => {
	// Once we get the s3url back, update the personal details for the user with the new avatar URL
	if (response.jsonCode === 200) {
	setPersonalDetails({avatar: response.s3url, avatarUploading: false}, true);
	}
	});
	}

So we have to update setAvatar() actions as under within src/libs/actions/PersonalDetails.js file:

function setAvatar(file) {
    setPersonalDetails({avatarUploading: true});
    API.User_UploadAvatar({file})
        .then((response) => {
            // Once we get the s3url back, update the personal details for the user with the new avatar URL
            if (response.jsonCode === 200) {
                setPersonalDetails({avatar: response.s3url, avatarUploading: false}, true);
            } else {
                setPersonalDetails({avatarUploading: false});
                Growl.show(translateLocal('profilePage.avatarUploadFailureMessage'), CONST.GROWL.ERROR, 3000);
            }
        })
        .catch((error) => {
            setPersonalDetails({avatarUploading: false});
            if (error.jsonCode === 404) {
                Growl.show(translateLocal('profilePage.invalidFileMessage'), CONST.GROWL.ERROR, 3000);
            } else {
                Growl.show(translateLocal('profilePage.avatarUploadFailureMessage'), CONST.GROWL.ERROR, 3000);
            }
        });
}

Also within language file we have to add translation as under:
src/languages/en.js

profilePage: {
    ...,
    invalidFileMessage: 'Invalid file. Please try a different image.',
    avatarUploadFailureMessage: 'An error occurred uploading the avatar, please try again.',
},

src/languages/es.js

profilePage: {
    ...,
    invalidFileMessage: 'Archivo inválido. Pruebe con una imagen diferente.',
    avatarUploadFailureMessage: 'No se pudo subir el avatar. Por favor, inténtalo de nuevo.',
},

Below is screen record, How it works after update:

Web.mov

[yuwenmemon]

This can be worked on by a contributor.

[MelvinBot]

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

[dylanexpensify]

Working on this now!

[dylanexpensify]

Posted!

Internal: https://www.upwork.com/ab/applicants/1445266428359061504/job-details
External: https://www.upwork.com/jobs/~01bf3c369a15b3262e

[MelvinBot]

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

[PrashantMangukiya]

@dylanexpensify, If my suggested solution #5593 (comment) work then kindly accept my proposal on upwork. So I can proceed to submit pr.

[gaurav27ats]

please accept my proposal so that I can work according to your requirements

[thienlnam]

@PrashantMangukiya Great proposal and good catch on the handling with the .catch and the .then. This solution works but as you mentioned we have some server side handling that will sometimes not throw the error. That's something I will look into internally but for your proposal, lets only keep the handling in .catch and remove the if/else in the .then

[thienlnam]

@gaurav27ats Thanks for your interest! Please read over https://github.com/Expensify/App/blob/main/CONTRIBUTING.md#working-on-expensify-jobs for future reference as you'll need to propose a solution in the Github issue

[PrashantMangukiya]

@thienlnam Thank you for the message. Below is the updated solution.

Existing code for setAvatar() is as under:

App/src/libs/actions/PersonalDetails.js

Lines 273 to 281 in fa7cb60

	function setAvatar(file) {
	setPersonalDetails({avatarUploading: true});
	API.User_UploadAvatar({file}).then((response) => {
	// Once we get the s3url back, update the personal details for the user with the new avatar URL
	if (response.jsonCode === 200) {
	setPersonalDetails({avatar: response.s3url, avatarUploading: false}, true);
	}
	});
	}

Solution: We have to add .catch() block within setAvatar() actions, .then() block logic remain as it is.

Note: Previously I suggested else condition within then() block. Now no else condition in .then() block. So server side team please make sure to throw error() with 404 in case of invalid file etc. so it can be handled via catch() block.

function setAvatar(file) {
    setPersonalDetails({avatarUploading: true});
    API.User_UploadAvatar({file})
        .then((response) => {
            // Once we get the s3url back, update the personal details for the user with the new avatar URL
            if (response.jsonCode === 200) {
                setPersonalDetails({avatar: response.s3url, avatarUploading: false}, true);
            }
        })
        .catch((error) => {
            setPersonalDetails({avatarUploading: false});
            if (error.jsonCode === 404) {
                Growl.show(translateLocal('profilePage.invalidFileMessage'), CONST.GROWL.ERROR, 3000);
            } else {
                Growl.show(translateLocal('profilePage.avatarUploadFailureMessage'), CONST.GROWL.ERROR, 3000);
            }
        });
}

We have to add translation within src/languages/en.js:

profilePage: {
    ...,
    invalidFileMessage: 'Invalid file. Please try a different image.',
    avatarUploadFailureMessage: 'An error occurred uploading the avatar, please try again.',
},

We have to add translation within src/languages/es.js:

profilePage: {
    ...,
    invalidFileMessage: 'Archivo inválido. Pruebe con una imagen diferente.',
    avatarUploadFailureMessage: 'No se pudo subir el avatar. Por favor, inténtalo de nuevo.',
},

If this solution ok then please message once we are ready to move forward. So I will proceed to submit pr.

[kadiealexander]

Please refer to this post for updated information on the n6 hold, we've raised the bonus to $250 for all issues where a PR is created before the N6 hold is lifted.

[dylanexpensify]

Removed hold, $250 bonus applies

[dylanexpensify]

not overdue

[thienlnam]

@PrashantMangukiya The mentioned PR is on production and I also updated one of the codes to a 405 instead of a 404 for an invalid image. Please give it another test and let's continue implementation specific comments in the PR

[PrashantMangukiya]

@thienlnam thanks for the message. Today I am busy, so tomorrow I will test and continue for implementation in the PR. I will message if need any other help. Thanks again.

[PrashantMangukiya]

@thienlnam I tested it with latest version. Still it is returning 502 code within then() block if invalid image file uploaded. Here is latest screenshot from web debug.

It looks like there is not any api changes at server side etc.

[thienlnam]

Gotcha, in that case go ahead and use parasharrajat's suggestion and handle errors by throwing inside the .then() if it's not a 200

[PrashantMangukiya]

Thanks @thienlnam I will implement it as per parasharrajat's suggestion i.e. handle errors by throwing inside the .then() if it's not a 200. So once I will test it properly thereafter submit pr as soon as possible.

[dylanexpensify]

not overdue

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.14-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Corrected infinite loading problem if non-image file uploaded for profile image #6189

If no regressions arise, payment will be issued on 2021-11-22. 🎊

[PrashantMangukiya]

@dylanexpensify Ping for Upwork payment.

[dylanexpensify]

On it now @PrashantMangukiya!

[dylanexpensify]

Payment sent (with Bonus), contract cancelled, and job posting deleted!

[mallenexpensify]

Issue reported by: @Hanaffi

@Hanaffi needs to be paid for reporting, I've hired them in Upwork, waiting for them to accept then I'll pay. Managing via email.

[dylanexpensify]

Ah shoot, thanks @mallenexpensify! Completely missed this, my bad!

[mallenexpensify]

Paid @Hanaffi in Upwork for reporting

[melvin-bot]

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