Avatar Image Upload Limit

src/CONST.js

@@ -4,6 +4,7 @@ const NEW_EXPENSIFY_URL = 'https://new.expensify.com';
 const CONST = {
     // 50 megabytes in bytes
     API_MAX_ATTACHMENT_SIZE: 52428800,
+    AVATAR_MAX_ATTACHMENT_SIZE_MB: 3,
     APP_DOWNLOAD_LINKS: {
         ANDROID: 'https://play.google.com/store/apps/details?id=com.expensify.chat',
         IOS: 'https://apps.apple.com/us/app/expensify-cash/id1530278510',

src/components/AttachmentPicker/index.native.js

@@ -5,6 +5,7 @@ import React, {Component} from 'react';
 import {Alert, Linking, View} from 'react-native';
 import {launchImageLibrary} from 'react-native-image-picker';
 import RNDocumentPicker from 'react-native-document-picker';
+import lodashGet from 'lodash/get';
 import {propTypes as basePropTypes, defaultProps} from './AttachmentPickerPropTypes';
 import styles from '../../styles/styles';
 import Popover from '../Popover';
@@ -65,7 +66,7 @@ function getDataForUpload(fileData) {
         name: fileData.fileName || fileData.name || 'chat_attachment',
         type: fileData.type,
         uri: fileData.uri,
-        size: fileData.size,
+        size: lodashGet(fileData, 'fileSize', lodashGet(fileData, 'size')),
     };
 }
 

src/components/AvatarWithImagePicker.js

@@ -4,6 +4,7 @@ import {
     Pressable, View, Animated, StyleSheet,
 } from 'react-native';
 import PropTypes from 'prop-types';
+import lodashGet from 'lodash/get';
 import Avatar from './Avatar';
 import Icon from './Icon';
 import PopoverMenu from './PopoverMenu';
@@ -13,6 +14,7 @@ import {
 import styles from '../styles/styles';
 import themeColors from '../styles/themes/default';
 import AttachmentPicker from './AttachmentPicker';
+import ConfirmModal from './ConfirmModal';
 import withLocalize, {withLocalizePropTypes} from './withLocalize';
 import variables from '../styles/variables';
 import CONST from '../CONST';
@@ -52,6 +54,9 @@ const propTypes = {
     /** Size of Indicator */
     size: PropTypes.string,
 
+    /** Max image size */
+    maxUploadSizeInMB: PropTypes.number,
+
     ...withLocalizePropTypes,
 };
 
@@ -64,14 +69,18 @@ const defaultProps = {
     isUsingDefaultAvatar: false,
     isUploading: false,
     size: CONST.AVATAR_SIZE.DEFAULT,
+    maxUploadSizeInMB: undefined,
 };
 
 class AvatarWithImagePicker extends React.Component {
     constructor(props) {
         super(props);
         this.animation = new SpinningIndicatorAnimation();
+        this.setUploadLimitModalVisibility = this.setUploadLimitModalVisibility.bind(this);
+        this.isValidSize = this.isValidSize.bind(this);
         this.state = {
             isMenuVisible: false,
+            isMaxUploadSizeModalOpen: false,
         };
     }
 
@@ -93,6 +102,23 @@ class AvatarWithImagePicker extends React.Component {
         this.animation.stop();
     }
 
+    /**
+     *  Toggle max upload limit mModal visibility
+     * @param {Boolean} isVisible
+    */
+    setUploadLimitModalVisibility(isVisible) {
+        this.setState({isMaxUploadSizeModalOpen: isVisible});
+    }
+
+    /**
+     * Check if the attachment size is less than allowed size.
+     * @param {Object} image
+     * @returns {Boolean}
+     */
+    isValidSize(image) {
+        return !image || !this.props.maxUploadSizeInMB || lodashGet(image, 'size', 0) < (this.props.maxUploadSizeInMB * 1024 * 1024);
+    }
+
     /**
      * Create menu items list for avatar menu
      *
@@ -106,7 +132,13 @@ class AvatarWithImagePicker extends React.Component {
                 text: this.props.translate('avatarWithImagePicker.uploadPhoto'),
                 onSelected: () => {
                     openPicker({
-                        onPicked: this.props.onImageSelected,
+                        onPicked: (image) => {
+                            if (!this.isValidSize(image)) {
+                                this.setUploadLimitModalVisibility(true);
+                                return;
+                            }
+                            this.props.onImageSelected(image);
+                        },
                     });
                 },
             },
@@ -200,6 +232,15 @@ class AvatarWithImagePicker extends React.Component {
                         </AttachmentPicker>
                     </View>
                 </Pressable>
+                <ConfirmModal
+                    title={this.props.translate('avatarWithImagePicker.imageUploadFailed')}
+                    onConfirm={() => this.setUploadLimitModalVisibility(false)}
+                    onCancel={() => this.setUploadLimitModalVisibility(false)}
+                    isVisible={this.state.isMaxUploadSizeModalOpen}
+                    prompt={this.props.translate('avatarWithImagePicker.sizeExceeded', {maxUploadSizeInMB: this.props.maxUploadSizeInMB})}
+                    confirmText={this.props.translate('common.close')}
+                    shouldShowCancelButton={false}
+                />
             </View>
         );
     }

src/languages/en.js

@@ -216,6 +216,8 @@ export default {
         uploadPhoto: 'Upload photo',
         removePhoto: 'Remove photo',
         editImage: 'Edit photo',
+        imageUploadFailed: 'Image upload failed',
+        sizeExceeded: ({maxUploadSizeInMB}) => `The selected image exceeds the maximum upload size of ${maxUploadSizeInMB}MB.`,
     },
     profilePage: {
         profile: 'Profile',

src/languages/es.js

@@ -216,6 +216,8 @@ export default {
         uploadPhoto: 'Subir foto',
         removePhoto: 'Eliminar foto',
         editImage: 'Editar foto',
+        imageUploadFailed: 'Error al cargar la imagen',
+        sizeExceeded: ({maxUploadSizeInMB}) => `La imagen supera el tamaño máximo de ${maxUploadSizeInMB} MB.`,
     },
     profilePage: {
         profile: 'Perfil',

src/pages/settings/Profile/ProfilePage.js

@@ -211,6 +211,7 @@ class ProfilePage extends Component {
                             isUsingDefaultAvatar={this.props.myPersonalDetails.avatar.includes('/images/avatars/avatar')}
                             anchorPosition={styles.createMenuPositionProfile}
                             size={CONST.AVATAR_SIZE.LARGE}
+                            maxUploadSizeInMB={CONST.AVATAR_MAX_ATTACHMENT_SIZE_MB}
                         />
                         <Text style={[styles.mt6, styles.mb6]}>
                             {this.props.translate('profilePage.tellUsAboutYourself')}

src/pages/workspace/WorkspaceSettingsPage.js

@@ -158,6 +158,7 @@ class WorkspaceSettingsPage extends React.Component {
                                     isUsingDefaultAvatar={!this.state.previewAvatarURL}
                                     onImageSelected={this.uploadAvatar}
                                     onImageRemoved={this.removeAvatar}
+                                    maxUploadSizeInMB={CONST.AVATAR_MAX_ATTACHMENT_SIZE_MB}
                                 />
 
                                 <ExpensiTextInput