Android - IOU - Nothing happens when you select corrupted jpg file in SmartScan/no error message

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.52-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Start the Request money > "Scan" receipt flow
2. Upload corrupted .jpg file

Expected Result:

There's should be a brief modal for "Scan in progress"

Actual Result:

Nothing happens when you select corrupted jpg file in SmartScan
No error message appears

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6414182_1710451089792.Recording__2491.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @isabelastisser (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[izarutskaya]

@isabelastisser I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[Krishna2323]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Android - IOU - Nothing happens when you select corrupted jpg file in SmartScan/no error message

What is the root cause of that problem?

RNImage.getSize fails to get the size of the image when its corrupted and throws error, but we don't handle it to show alert incase it fails.

App/src/components/AttachmentPicker/index.native.js

Lines 271 to 274 in e9c112a

	RNImage.getSize(fileData.fileCopyUri || fileData.uri, (width, height) => {
	fileData.width = width;
	fileData.height = height;
	return validateAndCompleteAttachmentSelection(fileData);

What changes do you think we should make in order to solve the problem?

We need to use third parameter of RNImage.getSize which receives a failure callback and handle the error accordingly. Incase of corrupt image it throws unknown image format, we can use it and show corrupt image alert else we will show general alert.

RNImage.getSize(
   fileData.fileCopyUri || fileData.uri,
   (width, height) => {
       fileData.width = width;
       fileData.height = height;
       return validateAndCompleteAttachmentSelection(fileData);
   },
   (error) => {
       if (error.message === 'unknown image format') {
           showImageCorruptionAlert();
       } else {
           showGeneralAlert();
       }
   },
);

If we want to block users from adding corrupted images on web also we can use RNImage.getSize and block user and show modal when failure callback is called.

            RNImage.getSize(
               fileCopy.fileCopyUri || fileCopy.uri,
               () => {},
               (e) => {
                   /// Block users and show message.
               },
           );

This is just a pseudo-code, it will require more changes but approach will be to use RNImage.getSize to check if the image file is corrupted or not. Will only add this check for images by using Str.isImage(fileCopy.fileName || fileCopy.name)

Result

Alternative

Or simply use fileData (without modifications) when error callback is triggered.

RNImage.getSize(
   fileData.fileCopyUri || fileData.uri,
   (width, height) => {
       fileData.width = width;
       fileData.height = height;
       return validateAndCompleteAttachmentSelection(fileData);
   },
   (error) => {
       validateAndCompleteAttachmentSelection(fileData);
   },
);

[shahinyan11]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Android - IOU - Nothing happens when you select corrupted jpg file in SmartScan/no error message

What is the root cause of that problem?

We call the validateAndCompleteAttachmentSelection function inside the success callback of RNImage.getSize. And if getSize failsб the validateAndCompleteAttachmentSelection is not called .

What changes do you think we should make in order to solve the problem?

1. Replace this part of code like below

if (Str.isImage(fileData.fileName || fileData.name)) {
    return RNImage.getSize(fileData.fileCopyUri || fileData.uri, (width, height) => {
        fileData.width = width;
        fileData.height = height;
    }).then(validateAndCompleteAttachmentSelection(fileData));
} 

return validateAndCompleteAttachmentSelection(fileData);

2. Update this condition with below

if (fileData.width === -1  || fileData.height === -1 || !fileData.width || !fileData.height ) {

The problem also exists in the Web. To fix problem for Web we can make the changes described below.

1. Add new checkFileCorruptionAsync function in FileUtils.

function checkFileCorruptionAsync(file: File) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.onload = (event) => {
            const arr = (new Uint8Array(event.target?.result as ArrayBuffer)).subarray(0, 4);
            let header = '';

            arr.forEach((value)=>{
                header += value.toString(16);
            })

            // '89504e47' => PNG, '47494638' => GIF, 'ffd8ffe0' => JPEG, 'ffd8ffe1' => JPEG
            if (['89504e47', '47494638', 'ffd8ffe0', 'ffd8ffe1'].includes(header)){
                resolve(true);
            } else{
                reject(new Error(`'Error reading file: The file is corrupted`));
            }
        };

        reader.readAsArrayBuffer(file.slice(0, 4));
    });
}

2. Update the Validate function like below

function validateReceipt(file) {
    return FileUtils.checkFileCorruptionAsync(file).then(()=>{
        const {fileExtension} = FileUtils.splitExtensionFromFileName(lodashGet(file, 'name', ''));
        if (!CONST.API_ATTACHMENT_VALIDATIONS.ALLOWED_RECEIPT_EXTENSIONS.includes(fileExtension.toLowerCase())) {
            setUploadReceiptError(true, 'attachmentPicker.wrongFileType', 'attachmentPicker.notAllowedExtension');
            return false;
        }

        if (lodashGet(file, 'size', 0) > CONST.API_ATTACHMENT_VALIDATIONS.MAX_SIZE) {
            setUploadReceiptError(true, 'attachmentPicker.attachmentTooLarge', 'attachmentPicker.sizeExceeded');
            return false;
        }

        if ((lodashGet(file, 'size', 0) < CONST.API_ATTACHMENT_VALIDATIONS.MIN_SIZE)) {
            setUploadReceiptError(true, 'attachmentPicker.attachmentTooSmall', 'attachmentPicker.sizeNotMet');
            return false;
        }

        return true;
    }).catch(()=>{
        setUploadReceiptError(true, 'attachmentPicker.attachmentError', 'attachmentPicker.errorWhileSelectingCorruptedImage');
        return false;
    })
}

3. Update the setReceiptAndNavigate function like below

const setReceiptAndNavigate = (file) => {
    validateReceipt(file).then((isValid)=>{
        if (!isValid) {
            return;
        }

        // Store the receipt on the transaction object in Onyx
        const source = URL.createObjectURL(file);
        IOU.setMoneyRequestReceipt(transactionID, source, file.name, action !== CONST.IOU.ACTION.EDIT);

        if (action === CONST.IOU.ACTION.EDIT) {
            updateScanAndNavigate(file, source);
            return;
        }

        navigateToConfirmationStep();
    })
};

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Added alternative solution

[shahinyan11]

Proposal

Updated. Changes have been added to fix this issue also for the Web.

[Krishna2323]

Proposal updated

Added explanation to fix on web also if required.

[melvin-bot]

Unable to auto-create job on Upwork. The BZ team member should create it manually for this issue.