-
Notifications
You must be signed in to change notification settings - Fork 2.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Avatar Image Upload Limit #5900
Changes from 9 commits
1e74b9e
c28e73e
4357ffc
754045f
921a577
6d5f1fb
601151a
d9c7583
40efded
9f8c0d9
e288d0c
5fadd0a
470b3c3
37fb1fc
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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')), | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why do we need lodashGet here? will There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Still a question? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ohh I did answer this yesterday, can't find the comment. Earlier we had There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok. I think it is better like this.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Updated. I thought generally we use |
||
}; | ||
} | ||
|
||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Could you please add the correct type here?
Suggested change
|
||||||
|
||||||
/** Max image size */ | ||||||
maxUploadSizeInMB: PropTypes.number, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Why do we need this prop? I don't think we want to customize this ever. |
||||||
|
||||||
...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 | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
* @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); | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. When the image is null, it returns |
||||||
} | ||||||
|
||||||
/** | ||||||
* 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})} | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. You can use |
||||||
confirmText={this.props.translate('common.close')} | ||||||
shouldShowCancelButton={false} | ||||||
/> | ||||||
</View> | ||||||
); | ||||||
} | ||||||
|
Original file line number | Diff line number | Diff line change | ||||
---|---|---|---|---|---|---|
|
@@ -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.`, | ||||||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
Suggested change
|
||||||
}, | ||||||
profilePage: { | ||||||
profile: 'Perfil', | ||||||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Not needed based on my comment above. |
||
/> | ||
<Text style={[styles.mt6, styles.mb6]}> | ||
{this.props.translate('profilePage.tellUsAboutYourself')} | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same here. |
||
/> | ||
|
||
<ExpensiTextInput | ||
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Could you please change it to Bytes? Most of the time arithmetic operations will be in bytes.