Merge pull request Expensify#72347 from samranahm/71598/check-isUploaded

fix: Prevent previewing large files before upload and show appropriate message

Author: luacmartins

src/components/AnchorForAttachmentsOnly/BaseAnchorForAttachmentsOnly.tsx

@@ -12,6 +12,7 @@ import {isArchivedNonExpenseReport} from '@libs/ReportUtils';
 import {setDownload} from '@userActions/Download';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 import type AnchorForAttachmentsOnlyProps from './types';
 
 type BaseAnchorForAttachmentsOnlyProps = AnchorForAttachmentsOnlyProps & {
@@ -66,6 +67,7 @@ function BaseAnchorForAttachmentsOnly({style, source = '', displayName = '', onP
                         isDeleted={!!isDeleted}
                         isUploading={!sourceID}
                         isAuthTokenRequired={!!sourceID}
+                        isUploaded={!isEmptyObject(report)}
                     />
                 </PressableWithoutFeedback>
             )}

src/components/Attachments/AttachmentCarousel/CarouselItem.tsx

@@ -9,9 +9,12 @@ import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeed
 import SafeAreaConsumer from '@components/SafeAreaConsumer';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
+import useOnyx from '@hooks/useOnyx';
 import useThemeStyles from '@hooks/useThemeStyles';
 import AttachmentModalContext from '@pages/media/AttachmentModalScreen/AttachmentModalContext';
 import CONST from '@src/CONST';
+import ONYXKEYS from '@src/ONYXKEYS';
+import {isEmptyObject} from '@src/types/utils/EmptyObject';
 
 type CarouselItemProps = {
     /** Attachment required information such as the source and file name */
@@ -35,6 +38,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered, reportID}: Caro
     const {translate} = useLocalize();
     const {isAttachmentHidden} = useContext(AttachmentModalContext);
     const [isHidden, setIsHidden] = useState(() => (item.reportActionID && isAttachmentHidden(item.reportActionID)) ?? item.hasBeenFlagged);
+    const [report] = useOnyx(`${ONYXKEYS.COLLECTION.REPORT}${reportID}`, {canBeMissing: true});
 
     const renderButton = (style: StyleProp<ViewStyle>) => (
         <Button
@@ -90,6 +94,7 @@ function CarouselItem({item, onPress, isFocused, isModalHovered, reportID}: Caro
                     duration={item.duration}
                     fallbackSource={Expensicons.AttachmentNotFound}
                     reportID={reportID}
+                    isUploaded={!isEmptyObject(report)}
                 />
             </View>
 

src/components/Attachments/AttachmentView/index.tsx

@@ -299,7 +299,7 @@ function AttachmentView({
             if (!isUploaded) {
                 return (
                     <>
-                        <View style={styles.imageModalImageCenterContainer}>
+                        <View style={[styles.imageModalImageCenterContainer, styles.ph10]}>
                             <DefaultAttachmentView
                                 icon={Gallery}
                                 fileName={file?.name}

src/styles/utils/getHighResolutionInfoWrapperStyle/index.native.ts

@@ -5,7 +5,7 @@ import type GetHighResolutionInfoWrapperStyle from './types';
 const getHighResolutionInfoWrapperStyle: GetHighResolutionInfoWrapperStyle = (isUploaded) => ({
     ...spacing.ph8,
     ...spacing.pt5,
-    ...(isUploaded ? spacing.pb5 : spacing.mbn1),
+    ...(isUploaded ? spacing.pb5 : spacing.pb1),
 });
 
 export default getHighResolutionInfoWrapperStyle;

src/styles/utils/getHighResolutionInfoWrapperStyle/index.ts

@@ -5,7 +5,7 @@ import type GetHighResolutionInfoWrapperStyle from './types';
 const getHighResolutionInfoWrapperStyle: GetHighResolutionInfoWrapperStyle = (isUploaded) => ({
     ...spacing.ph5,
     ...spacing.pt5,
-    ...(isUploaded ? spacing.pb5 : spacing.mbn1),
+    ...(isUploaded ? spacing.pb5 : spacing.pb1),
 });
 
 export default getHighResolutionInfoWrapperStyle;