Android - Avatar- SVG file as avatar able to select in Android

[izarutskaya]

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

---

Version Number: 1.4.51
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/4421959
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Launch app
2. Tap profile icon
3. Tap profile
4. Upload an svg file

Expected Result:

When user uploads svg file as avatar, it must display correct error message that svg file is not supported or it must not allow to select unsupported files.

Actual Result:

User allowed to select svg file as avatar. When user uploads svg file as avatar, it displays incorrect error " Please upload an image larger than 8080 pixels and smaller than 40o64096 pixels.

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

Bug6411919_1710308315204.documents.mp4

View all open jobs on GitHub

[melvin-bot]

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

[izarutskaya]

@kevinksullivan 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.

[izarutskaya]

We think that this bug might be related to #vip-vsb
CC @quinthar

[dragnoir]

Proposal

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

SVG allowed on Android

What is the root cause of that problem?

We are mentioning SVG as a valid extention here:

App/src/components/AvatarWithImagePicker.tsx

Lines 177 to 180 in f52bb02

	const isValidExtension = (image: File): boolean => {
	const {fileExtension} = FileUtils.splitExtensionFromFileName(image?.name ?? '');
	return CONST.AVATAR_ALLOWED_EXTENSIONS.some((extension) => extension === fileExtension.toLowerCase());
	};

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

Check the device type (Android as QA) and do not set SVG as valid here:

App/src/components/AvatarWithImagePicker.tsx

Lines 177 to 180 in f52bb02

	const isValidExtension = (image: File): boolean => {
	const {fileExtension} = FileUtils.splitExtensionFromFileName(image?.name ?? '');
	return CONST.AVATAR_ALLOWED_EXTENSIONS.some((extension) => extension === fileExtension.toLowerCase());
	};

- AVATAR_ALLOWED_EXTENSIONS: ['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg'],
+ AVATAR_ALLOWED_EXTENSIONS_ANDROID: ['jpg', 'jpeg', 'png', 'gif', 'bmp'],

Then set the correct error for Android here:

App/src/components/AvatarWithImagePicker.tsx

Lines 198 to 228 in f52bb02

	const showAvatarCropModal = (image: File) => {
	if (!isValidExtension(image)) {
	setError('avatarWithImagePicker.notAllowedExtension', {allowedExtensions: CONST.AVATAR_ALLOWED_EXTENSIONS});
	return;
	}
	if (!isValidSize(image)) {
	setError('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: CONST.AVATAR_MAX_ATTACHMENT_SIZE / (1024 * 1024)});
	return;
	}
	isValidResolution(image).then((isValid) => {
	if (!isValid) {
	setError('avatarWithImagePicker.resolutionConstraints', {
	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;
	}
	setIsAvatarCropModalOpen(true);
	setError(null, {});
	setIsMenuVisible(false);
	setImageData({
	uri: image.uri ?? '',
	name: image.name,
	type: image.type,
	});
	});
	};

- Profile picture must be one of the following types: jpg, jpeg, png, gif, bmp, svg.
+ Profile picture must be one of the following types: jpg, jpeg, png, gif, bmp.

What alternative solutions did you explore? (Optional)

[bernhardoj]

Proposal

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

User is able to select SVG but the app gives size error.

What is the root cause of that problem?

When we select an image attachment, it will try to get the width and height of the image.

App/src/components/AttachmentPicker/index.native.js

Lines 270 to 278 in f52bb02

	if (Str.isImage(fileData.fileName || fileData.name)) {
	RNImage.getSize(fileData.fileCopyUri || fileData.uri, (width, height) => {
	fileData.width = width;
	fileData.height = height;
	return validateAndCompleteAttachmentSelection(fileData);
	});
	} else {
	return validateAndCompleteAttachmentSelection(fileData);
	}

However, Str.isImage will return false for svg and it's because Str.isImage only includes supported image by RN. So, the width and height is both undefined, hence the error message about size is shown.

This started to happen when we allowed the user to pick an image from a document picker and it allows to select any type of image.

App/src/components/AttachmentPicker/index.native.js

Lines 67 to 69 in f52bb02

	if (type === CONST.ATTACHMENT_PICKER_TYPE.IMAGE) {
	return {
	type: [RNDocumentPicker.types.images],

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

Only allow users to select images that are supported by RN.

// for android
type: ['image/png', 'image/jpg', 'image/jpeg', 'image/bmp', 'image/gif', 'image/webp'],
// for iOS: from https://developer.apple.com/documentation/uniformtypeidentifiers/system-declared_uniform_type_identifiers#3590524
type: ['public.png', 'public.jpeg', 'com.microsoft.bmp', etc.],

[kevinksullivan]

hm I just don't really think this is worth fixing right now.