Merge pull request #40162 from Krishna2323/krishna2323/issue/37435

Scan - No error modal shown after selecting corrupted image.
Expensify · Apr 15, 2024 · 4cf2976 · 4cf2976
2 parents c3e311d + 028748b
commit 4cf2976
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 36 deletions.
diff --git a/src/components/AttachmentPicker/index.native.tsx b/src/components/AttachmentPicker/index.native.tsx
@@ -237,7 +237,9 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
 
     const validateAndCompleteAttachmentSelection = useCallback(
         (fileData: FileResponse) => {
-            if (fileData.width === -1 || fileData.height === -1) {
+            // Check if the file dimensions indicate corruption
+            // The width/height for corrupt file is -1 on android native and 0 on ios native
+            if (!fileData.width || !fileData.height || (fileData.width <= 0 && fileData.height <= 0)) {
                 showImageCorruptionAlert();
                 return Promise.resolve();
             }
@@ -283,16 +285,18 @@ function AttachmentPicker({type = CONST.ATTACHMENT_PICKER_TYPE.FILE, children, s
             };
             /* eslint-enable @typescript-eslint/prefer-nullish-coalescing */
             if (fileDataName && Str.isImage(fileDataName)) {
-                ImageSize.getSize(fileDataUri).then(({width, height}) => {
-                    fileDataObject.width = width;
-                    fileDataObject.height = height;
-                    validateAndCompleteAttachmentSelection(fileDataObject);
-                });
+                ImageSize.getSize(fileDataUri)
+                    .then(({width, height}) => {
+                        fileDataObject.width = width;
+                        fileDataObject.height = height;
+                        validateAndCompleteAttachmentSelection(fileDataObject);
+                    })
+                    .catch(() => showImageCorruptionAlert());
             } else {
                 return validateAndCompleteAttachmentSelection(fileDataObject);
             }
         },
-        [validateAndCompleteAttachmentSelection],
+        [validateAndCompleteAttachmentSelection, showImageCorruptionAlert],
     );
 
     /**

diff --git a/src/libs/fileDownload/FileUtils.ts b/src/libs/fileDownload/FileUtils.ts
@@ -1,4 +1,7 @@
+import Str from 'expensify-common/lib/str';
 import {Alert, Linking, Platform} from 'react-native';
+import ImageSize from 'react-native-image-size';
+import type {FileObject} from '@components/AttachmentModal';
 import DateUtils from '@libs/DateUtils';
 import * as Localize from '@libs/Localize';
 import Log from '@libs/Log';
@@ -238,6 +241,17 @@ function base64ToFile(base64: string, filename: string): File {
     return file;
 }
 
+function validateImageForCorruption(file: FileObject): Promise<void> {
+    if (!Str.isImage(file.name ?? '')) {
+        return Promise.resolve();
+    }
+    return new Promise((resolve, reject) => {
+        ImageSize.getSize(file.uri ?? '')
+            .then(() => resolve())
+            .catch(() => reject(new Error('Error reading file: The file is corrupted')));
+    });
+}
+
 export {
     showGeneralErrorAlert,
     showSuccessAlert,
@@ -250,4 +264,5 @@ export {
     appendTimeToFileName,
     readFileAsync,
     base64ToFile,
+    validateImageForCorruption,
 };
diff --git a/src/pages/iou/request/step/IOURequestStepScan/index.tsx b/src/pages/iou/request/step/IOURequestStepScan/index.tsx
@@ -165,25 +165,34 @@ function IOURequestStepScan({
     };
 
     function validateReceipt(file: FileObject) {
-        const {fileExtension} = FileUtils.splitExtensionFromFileName(file?.name ?? '');
-        if (
-            !CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS.includes(fileExtension.toLowerCase() as (typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS)[number])
-        ) {
-            setUploadReceiptError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
-            return false;
-        }
+        return FileUtils.validateImageForCorruption(file)
+            .then(() => {
+                const {fileExtension} = FileUtils.splitExtensionFromFileName(file?.name ?? '');
+                if (
+                    !CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS.includes(
+                        fileExtension.toLowerCase() as (typeof CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS)[number],
+                    )
+                ) {
+                    setUploadReceiptError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
+                    return false;
+                }
 
-        if ((file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
-            setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded');
-            return false;
-        }
+                if ((file?.size ?? 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
+                    setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded');
+                    return false;
+                }
 
-        if ((file?.size ?? 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
-            setUploadReceiptError(true, 'attachmentPicker.attachmentTooSmall', 'attachmentPicker.sizeNotMet');
-            return false;
-        }
+                if ((file?.size ?? 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE) {
+                    setUploadReceiptError(true, 'attachmentPicker.attachmentTooSmall', 'attachmentPicker.sizeNotMet');
+                    return false;
+                }
 
-        return true;
+                return true;
+            })
+            .catch(() => {
+                setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.errorWhileSelectingCorruptedImage');
+                return false;
+            });
     }
 
     const navigateBack = () => {
@@ -220,21 +229,22 @@ function IOURequestStepScan({
      * Sets the Receipt objects and navigates the user to the next page
      */
     const setReceiptAndNavigate = (file: FileObject) => {
-        if (!validateReceipt(file)) {
-            return;
-        }
-
-        // Store the receipt on the transaction object in Onyx
-        const source = URL.createObjectURL(file as Blob);
-        // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
-        IOU.setMoneyRequestReceipt(transactionID, source, file.name || '', action !== CONST.IOU.ACTION.EDIT);
+        validateReceipt(file).then((isFileValid) => {
+            if (!isFileValid) {
+                return;
+            }
+            // Store the receipt on the transaction object in Onyx
+            const source = URL.createObjectURL(file as Blob);
+            // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
+            IOU.setMoneyRequestReceipt(transactionID, source, file.name || '', action !== CONST.IOU.ACTION.EDIT);
 
-        if (action === CONST.IOU.ACTION.EDIT) {
-            updateScanAndNavigate(file, source);
-            return;
-        }
+            if (action === CONST.IOU.ACTION.EDIT) {
+                updateScanAndNavigate(file, source);
+                return;
+            }
 
-        navigateToConfirmationStep();
+            navigateToConfirmationStep();
+        });
     };
 
     const setupCameraPermissionsAndCapabilities = (stream: MediaStream) => {