From 7a57dc9b01d3569b5417f022f9ff469858513a18 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 28 Jul 2021 03:30:49 +0300 Subject: [PATCH 1/8] add isValidSize func --- src/components/AttachmentModal.js | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index dfd81620d98a..3c581be4ca69 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -63,6 +63,7 @@ class AttachmentModal extends PureComponent { }; this.submitAndClose = this.submitAndClose.bind(this); + this.isValidSize = this.isValidSize.bind(this); } /** @@ -81,6 +82,18 @@ class AttachmentModal extends PureComponent { this.setState({isModalOpen: false}); } + /** + * Check if the attachment file is less than the API size limit. + * @param {Object} file + * @returns {Boolean} + */ + isValidSize(file) { + if (!file) { + return true; + } + return parseInt(file.size, 10) < CONST.API_MAX_ATTACHMENT_SIZE; + } + render() { const sourceURL = this.props.isAuthTokenRequired ? addEncryptedAuthTokenToURL(this.state.sourceURL) From c1d0184076bf90d3a47b901f34392e3787be3f75 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 28 Jul 2021 03:36:41 +0300 Subject: [PATCH 2/8] add language --- src/languages/en.js | 1 + src/languages/es.js | 1 + 2 files changed, 2 insertions(+) diff --git a/src/languages/en.js b/src/languages/en.js index 0d38c1bcf102..55bb76a1b41f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -70,6 +70,7 @@ export default { takePhoto: 'Take Photo', chooseFromGallery: 'Choose from Gallery', chooseDocument: 'Choose Document', + sizeExceeded: 'Attachment size is larger than 50 MB limit', }, textInputFocusable: { noExtentionFoundForMimeType: 'No extension found for mime type', diff --git a/src/languages/es.js b/src/languages/es.js index 674258988066..58c604363e5f 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -65,6 +65,7 @@ export default { takePhoto: 'Hacer una Foto', chooseFromGallery: 'Elegir de la galería', chooseDocument: 'Elegir Documento', + sizeExceeded: 'El archivo adjunto supera el límite de 50 MB', }, textInputFocusable: { noExtentionFoundForMimeType: 'No se encontró una extension para este tipo de contenido', From bcca87884496575876caa6b33f82aa3e6e2671cc Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 28 Jul 2021 03:45:09 +0300 Subject: [PATCH 3/8] add api size limit to CONST --- src/CONST.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/CONST.js b/src/CONST.js index ac5bda74851c..9b5d98579342 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -1,6 +1,8 @@ const CLOUDFRONT_URL = 'https://d2k5nsl2zxldvw.cloudfront.net'; const CONST = { + // 50 MB in bytes + API_MAX_ATTACHMENT_SIZE: 52428800, 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', From 0277089d973bd1eec5ddfa51fd153e0e203c6cb3 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 28 Jul 2021 12:40:59 +0300 Subject: [PATCH 4/8] show confirm modal for large attachment --- src/CONST.js | 2 +- src/components/AttachmentModal.js | 26 ++++++++++++++++++++++++-- src/languages/en.js | 1 + src/languages/es.js | 1 + 4 files changed, 27 insertions(+), 3 deletions(-) diff --git a/src/CONST.js b/src/CONST.js index 9b5d98579342..0a2ec92fd476 100755 --- a/src/CONST.js +++ b/src/CONST.js @@ -1,7 +1,7 @@ const CLOUDFRONT_URL = 'https://d2k5nsl2zxldvw.cloudfront.net'; const CONST = { - // 50 MB in bytes + // 50 megabytes in bytes API_MAX_ATTACHMENT_SIZE: 52428800, APP_DOWNLOAD_LINKS: { ANDROID: 'https://play.google.com/store/apps/details?id=com.expensify.chat', diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 3c581be4ca69..362da6f393a6 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -14,6 +14,7 @@ import Button from './Button'; import HeaderWithCloseButton from './HeaderWithCloseButton'; import fileDownload from '../libs/fileDownload'; import withLocalize, {withLocalizePropTypes} from './withLocalize'; +import ConfirmModal from './ConfirmModal'; /** * Modal render prop component that exposes modal launching triggers that can be used @@ -58,11 +59,13 @@ class AttachmentModal extends PureComponent { this.state = { isModalOpen: false, + isConfirmModalOpen: false, file: null, sourceURL: props.sourceURL, }; this.submitAndClose = this.submitAndClose.bind(this); + this.closeConfirmModal = this.closeConfirmModal.bind(this); this.isValidSize = this.isValidSize.bind(this); } @@ -83,8 +86,15 @@ class AttachmentModal extends PureComponent { } /** - * Check if the attachment file is less than the API size limit. - * @param {Object} file + * Close the confirm modal. + */ + closeConfirmModal() { + this.setState({isConfirmModalOpen: false}); + } + + /** + * Check if the attachment size is less than the API size limit. + * @param {Object} file * @returns {Boolean} */ isValidSize(file) { @@ -147,8 +157,20 @@ class AttachmentModal extends PureComponent { /> )} + {this.props.children({ displayFileInModal: ({file}) => { + if (!this.isValidSize(file)) { + this.setState({isConfirmModalOpen: true}); + return; + } if (file instanceof File) { const source = URL.createObjectURL(file); this.setState({isModalOpen: true, sourceURL: source, file}); diff --git a/src/languages/en.js b/src/languages/en.js index 55bb76a1b41f..a16534c2488f 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -70,6 +70,7 @@ export default { takePhoto: 'Take Photo', chooseFromGallery: 'Choose from Gallery', chooseDocument: 'Choose Document', + attachmentTooLarge: 'Attachment too large', sizeExceeded: 'Attachment size is larger than 50 MB limit', }, textInputFocusable: { diff --git a/src/languages/es.js b/src/languages/es.js index 58c604363e5f..81bccd2729a0 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -65,6 +65,7 @@ export default { takePhoto: 'Hacer una Foto', chooseFromGallery: 'Elegir de la galería', chooseDocument: 'Elegir Documento', + attachmentTooLarge: 'Archivo adjunto demasiado grandes', sizeExceeded: 'El archivo adjunto supera el límite de 50 MB', }, textInputFocusable: { From 5864478f4cf53af0365ac290ba35ec2d1bc05d12 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 28 Jul 2021 13:19:29 +0300 Subject: [PATCH 5/8] fix punctuation --- src/languages/en.js | 2 +- src/languages/es.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/languages/en.js b/src/languages/en.js index a16534c2488f..e920a8422f63 100755 --- a/src/languages/en.js +++ b/src/languages/en.js @@ -71,7 +71,7 @@ export default { chooseFromGallery: 'Choose from Gallery', chooseDocument: 'Choose Document', attachmentTooLarge: 'Attachment too large', - sizeExceeded: 'Attachment size is larger than 50 MB limit', + sizeExceeded: 'Attachment size is larger than 50 MB limit.', }, textInputFocusable: { noExtentionFoundForMimeType: 'No extension found for mime type', diff --git a/src/languages/es.js b/src/languages/es.js index 81bccd2729a0..82a3910a2821 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -66,7 +66,7 @@ export default { chooseFromGallery: 'Elegir de la galería', chooseDocument: 'Elegir Documento', attachmentTooLarge: 'Archivo adjunto demasiado grandes', - sizeExceeded: 'El archivo adjunto supera el límite de 50 MB', + sizeExceeded: 'El archivo adjunto supera el límite de 50 MB.', }, textInputFocusable: { noExtentionFoundForMimeType: 'No se encontró una extension para este tipo de contenido', From 9e4d97891a3130534073d05b241679e3bbf30ffe Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Wed, 28 Jul 2021 14:58:05 +0300 Subject: [PATCH 6/8] fix Spanish translation --- src/languages/es.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/languages/es.js b/src/languages/es.js index 82a3910a2821..6a7e78d89d99 100644 --- a/src/languages/es.js +++ b/src/languages/es.js @@ -65,7 +65,7 @@ export default { takePhoto: 'Hacer una Foto', chooseFromGallery: 'Elegir de la galería', chooseDocument: 'Elegir Documento', - attachmentTooLarge: 'Archivo adjunto demasiado grandes', + attachmentTooLarge: 'Archivo adjunto demasiado grande', sizeExceeded: 'El archivo adjunto supera el límite de 50 MB.', }, textInputFocusable: { From 69a06fafae42987b9da306e34d8f60d62f4deded Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 29 Jul 2021 03:14:32 +0300 Subject: [PATCH 7/8] refactor isValidSize --- src/components/AttachmentModal.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 362da6f393a6..8ea997b0eb12 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -98,10 +98,7 @@ class AttachmentModal extends PureComponent { * @returns {Boolean} */ isValidSize(file) { - if (!file) { - return true; - } - return parseInt(file.size, 10) < CONST.API_MAX_ATTACHMENT_SIZE; + return !file || parseInt(file.size, 10) < CONST.API_MAX_ATTACHMENT_SIZE; } render() { From 6a629da4ff7dbabcd29603a223ba436534097521 Mon Sep 17 00:00:00 2001 From: Rushat Gabhane Date: Thu, 29 Jul 2021 03:16:02 +0300 Subject: [PATCH 8/8] use lodashGet --- src/components/AttachmentModal.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/AttachmentModal.js b/src/components/AttachmentModal.js index 8ea997b0eb12..181c718c9f6e 100755 --- a/src/components/AttachmentModal.js +++ b/src/components/AttachmentModal.js @@ -2,6 +2,7 @@ import React, {PureComponent} from 'react'; import PropTypes from 'prop-types'; import {View} from 'react-native'; import Str from 'expensify-common/lib/str'; +import lodashGet from 'lodash/get'; import CONST from '../CONST'; import Modal from './Modal'; import AttachmentView from './AttachmentView'; @@ -98,7 +99,7 @@ class AttachmentModal extends PureComponent { * @returns {Boolean} */ isValidSize(file) { - return !file || parseInt(file.size, 10) < CONST.API_MAX_ATTACHMENT_SIZE; + return !file || lodashGet(file, 'size', 0) < CONST.API_MAX_ATTACHMENT_SIZE; } render() {