[HOLD for payment 1/12][$8000] Profile - Create a limit for Avatar file types or size

[kavimuru]

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

---

Action Performed:

1. Save the below image to your local drive
2. Open staging.new.expensify.com.
3. Open Settings, click on Avatar to open Profile Page.
4. Click on Edit photo and upload the below image
5. Try to scroll the slider to zoom in or zoom out the photo.
6. Notice that the slider can't not be scrolled for a while and it's delayed.

Expected Result:

• Slider need be scrolled smoothly without any delay
• We need to create an error message if a user is uploading a file/size too large to scroll smoothly

Actual Result:

Slider can't not be scrolled for a while and it's delayed after that.

• Based on our code we have:

• Max size: 6291456

• Min Width: 80

• Min Height: 80

• Max Width: XX

• Max Height: XX

We need to figure out what is causing this issue (is it pixels, weight, file type) and create an error message for the user

Platform:

Where is this issue occurring?

• Web

Version Number: 1.2.31-5
Reproducible in staging?: Y
Reproducible in production?: Y
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/203830021-84c9a597-6507-490b-881e-fb08fe57c900.mov
https://user-images.githubusercontent.com/43996225/203830045-659ad4c2-2fc4-4d86-870c-c3cb6338284f.mp4
Used this image :

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

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~017185b708f6ccd9fb
• Upwork Job ID: 1597776558088036352
• Last Price Increase: 2022-12-26

[melvin-bot]

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

[s77rt]

The image is 9001px by 9000px
That's too much, I won't say this is a bug

[Christinadobrzyn]

I am not able to replicate this.

Staging v1.2.32-1

1. Open staging.new.expensify.com.
2. Open Settings, click on Avatar to open Profile Page.
3. Click on Edit photo and choose an image from local.
4. Scroll the slider to zoom
5. Notice that the slider can't not be scrolled for a while and it's delayed.

Image used 80kb:

Based on the chat in the Slack link and as @s77rt mentioned, this seems to be an issue with large images. Do we want to change the focus of this to compress images before uploading or send a popup asking for a lighter image?

• Linked to [$8000] Feature Request - Profile / Workspace - Allow avatar editing via cropping, rotation and zooming - Reported by: @parasharrajat  #6301
• Reached out in the Slack convo to discuss if we want to do this or change the focus

[Beamanator]

Do we want to change the focus of this to compress images before uploading or send a popup asking for a lighter image?

I like these ideas (prefer asking for a smaller image) - added my comments in Slack!

[Christinadobrzyn]

I think we need to figure out what is causing the issue b/c it sounds like it might not be file size based on this comment.

The avatar limit code is here:

AVATAR_MAX_ATTACHMENT_SIZE: 6291456
AVATAR_MIN_WIDTH_PX: 80
AVATAR_MIN_HEIGHT_PX: 80

The image that @hungvu193 has very high pixelation - maybe that's the issue? @hungvu193 or @kavimuru do you have another image with a heavy pixelation/DPI that we can test?

[Christinadobrzyn]

Kinda came to a resolution in the Slack convo but love to get your thoughts on what to do next with this GH @Beamanator

[Beamanator]

Adding myself here too b/c I'm involved in lots of avatar-related issues, and this is very intriguing 😅

Also noting (as is noted in Slack) this is the same as #13005, which was closed w/out reproduction but it seems there's a few images we can use to reproduce at the moment (in Slack):

(Chose download free => Original size): https://unsplash.com/photos/SiwI2DVMZHI

[Christinadobrzyn]

Thanks @Beamanator and @hungvu193! I updated the title and the OP to hopefully match what we're looking for. Going to all the external label.

[melvin-bot]

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

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~017185b708f6ccd9fb

[melvin-bot]

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

[melvin-bot]

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

[hungvu193]

Proposal
This issue happened with large image size, in order to prevent that we need to limit the size of it.

App/src/CONST.js

Lines 31 to 34 in e82bcf6

	// Minimum width and height size in px for a selected image
	AVATAR_MIN_WIDTH_PX: 80,
	AVATAR_MIN_HEIGHT_PX: 80,

Solution
Add these values inside CONST next to AVATAR_MIN_WIDTH_PX:

+     AVATAR_MAX_WIDTH_PX: 4000,
+     AVATAR_MAX_HEIGHT_PX: 4000,

Also need to update the isValidResolution function inside AvatarWithImagePicker.js to:

    /**
     * Check if the attachment resolution is bigger than required.
     *
     * @param {String} imageUri
     * @returns {Promise}
     */
 isValidResolution(imageUri) {
        return new Promise((resolve) => {
            Image.getSize(imageUri, (width, height) => {
                resolve((height >= CONST.AVATAR_MIN_HEIGHT_PX && height <= CONST.AVATAR_MAX_HEIGHT_PX) && (width >= CONST.AVATAR_MIN_WIDTH_PX && width <= CONST.AVATAR_MAX_WIDTH_PX));
            });
        });
    }

Since we change the validation we need to update error message in here too, can some one provide me it. For now I leave it like this

        this.isValidResolution(image.uri)
            .then((isValidResolution) => {
                if (!isValidResolution) {
                    this.showErrorModal(
                        this.props.translate('avatarWithImagePicker.imageUploadFailed'),
                        this.props.translate('avatarWithImagePicker.tooSmallResolution', {
                            minHeightInPx: CONST.AVATAR_MIN_HEIGHT_PX,
                            minWidthInPx: CONST.AVATAR_MIN_WIDTH_PX,
                            maxHeightInPx: CONST.AVATAR_MAX_HEIGHT_PX,
                            maxWidthInPx: CONST.AVATAR_MAX_WIDTH_PX,
                        }),
                    );
                    return;
                }

 tooSmallResolution: ({
            minHeightInPx, minWidthInPx, maxHeightInPx, maxWidthInPx,
        }) => `Please upload an image larger than ${minHeightInPx}x${minWidthInPx} pixels and smaller than ${maxHeightInPx}x${maxWidthInPx} pixels`,

Result:

Untitled.mov

[Christinadobrzyn]

Here are some file size limits for other social media sites. Maybe we should use these?

FB Avatar size:
Max Size: 2048px X 2048px
Min Size: 168px X 168px
Aspect ratio: 1:1

WhatsApp Profile Image Size – 500 x 500 px

[hungvu193]

@Christinadobrzyn That's fine I think, but should we post this in slack for discussion as well, just to make sure everyone agree with it.

[sobitneupane]

I believe next step here is to determine file size limit and the error message to display when file size is outside the scope.

Having said that the proposal from @hungvu193 looks good to me.

[Christinadobrzyn]

Hey @Beamanator can you take a peek at #13006 (comment) and let me know if you agree? Thanks!

[Beamanator]

Interesting, here's what I'm seeing in different platforms:

• Twitter: Error: One or more images exceed the size limit and cannot be resized.
• Facebook: Took a while to load, no issues after that
• WhatsApp: Maybe a bit slow to load, no issues moving around / zooming after
• Discord: Took a while to load, lags a bit when zooming & moving around

Personally I'd love to not see the error message, and instead maybe warn the user that we'll decrease the photo quality before uploading (or do this automatically if possible).

[azimgd]

@tgolen addressed your feedback by extracting getImageResolution into .js / .native.js.

https://github.com/azimgd/expensify-app/blob/365d10a444f8776f6e3e9d3d3767f57c8557d5dd/src/libs/fileDownload/getImageResolution.native.js

[melvin-bot]

📣 @azimgd You have been assigned to this job by @mallenexpensify!
Please apply to this job in Upwork and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[mallenexpensify]

Assigned issue to and hired @azimgd can you please accept the job and reply here once you have? @sobitneupane, can you do the same plz
https://www.upwork.com/jobs/~017185b708f6ccd9fb

[azimgd]

applied

[azimgd]

ready for review 👆

[azimgd]

• max px resolution added based on this comment cc: @Christinadobrzyn
• ES translation is validated here: https://expensify.slack.com/archives/C01GTK53T8Q/p1672358985640889

[melvin-bot]

@tgolen, @azimgd, @mallenexpensify, @sobitneupane, @kavimuru, @Christinadobrzyn Whoops! This issue is 2 days overdue. Let's get this updated quick!

[mallenexpensify]

Deployed to Production on Jan 5, updating title to pay on 1/12
#13899 (comment)

I wonder why auto-bots didn't work for updating, maybe cuz there was additional data here in the PR?

Fixed Issues
$ #13006
PROPOSAL: #13006 (comment)

[mallenexpensify]

Hired Dec 29th, Merged Jan 3, eligible for the 50% bonus (weekend and holiday in between)

@azimgd and @sobitneupane paid $12,000
@hungvu193 , can you please accept the job and reply here once you have so I can pay the reporting bonus?
https://www.upwork.com/jobs/~017185b708f6ccd9fb

[hungvu193]

@mallenexpensify I've just applied, thank you

[Christinadobrzyn]

sorry, @mallenexpensify, would you be able to pay this? I'm really sick today and going to take ooo. thank you for taking it

[mallenexpensify]

@hungvu193 paid, thanks!

For regression test steps, proposing
Add to TestRail here - Profile - Modify User Avatar

1. Save an image that is between 80px and 2048px
2. Open staging.new.expensify.com.
3. Open Settings, click on Avatar to open Profile Page.
4. Click on Edit photo and upload the image
5. Verify the slides to zoom in and out scrolls smoothly.

@tgolen @sobitneupane can you finish the top three items on the checklist?

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• The PR that introduced the bug has been identified. Link to the PR:
• 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:
• 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:
• A regression test has been added or updated so that the same bug will not reach production again. Link to the GH issue for creating the test here: https://github.com/Expensify/Expensify/issues/256180

[mallenexpensify]

Should have feedback on the regression test steps by Monday

[sobitneupane]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• The PR that introduced the bug has been identified. Link to the PR:

I think this bug was present from the very beginning. This feature was implemented in #8511.

[mallenexpensify]

Thanks @sobitneupane , waiting for 👀 on the regression test steps
https://expensify.slack.com/archives/C01SKUP7QR0/p1673915154156849?thread_ts=1673578243.618989&cid=C01SKUP7QR0

[melvin-bot]

@tgolen @mallenexpensify Be sure to fill out the Contact List!

[mallenexpensify]

Regression test added https://github.com/Expensify/Expensify/issues/256180