[Due for payment 2025-06-11] Unable to upload HEIF image as money request (Web)

@Beamanator

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: 9.0.18-1
Reproducible in staging?: Y
Reproducible in production?: N
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
Expensify/Expensify Issue URL:
Issue reported by: @Beamanator
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1723093506634689

Action Performed:

Take picture on iPhone 12 (HEIF image)
Try to request money & upload by scanning receipt IN WEB

Expected Result:

Image should upload & scan

Actual Result:

Saw error message "Invalid file type"

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

RPReplay_Final1723093247.MP4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @RachCHopkins

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~0116d43a98c70752e7
Upwork Job ID: 1826245037583994789
Last Price Increase: 2024-08-21
Automatic offers:

nyomanjyotisa | Contributor | 103881407

@kevinksullivan

Triggered auto assignment to @kevinksullivan (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

@johnmlee101

Triggered auto assignment to @johnmlee101 (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Edited by proposal-police: This proposal was edited at 2024-09-05 12:18:12 UTC.

Proposal

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

Unable to upload HEIF image as money request

What is the root cause of that problem?

heif is not in the list of ALLOWED_RECEIPT_EXTENSIONS

App/src/CONST.ts

Line 122 in d7b0aba

    
           ALLOWED_RECEIPT_EXTENSIONS: ['jpg', 'jpeg', 'gif', 'png', 'pdf', 'htm', 'html', 'text', 'rtf', 'doc', 'tif', 'tiff', 'msword', 'zip', 'xml', 'message'],

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

Add heif and heic to ALLOWED_RECEIPT_EXTENSIONS

We also need to convert the heif/heic image to jpeg first before displaying and uploading the receipt image to BE

We cant use expo-image-manipulator like we use here on web so I propose we use heic-to for the converter

Create new function called convertReceipt

Details

    const convertReceipt = async (originalFile: FileObject, isPdfValidated?: boolean) => {
        if (originalFile?.type?.startsWith('image')) {
            if (!originalFile.uri) {
                console.error('File URI is undefined');
                return;
            }

            try {
                const response = await fetch(originalFile.uri);
                const blob = await response.blob();

                const fileFromBlob = new File([blob], originalFile.name || 'temp-file', {
                    type: blob.type,
                });

                const isHEIC = await isHeic(fileFromBlob);

                if (isHEIC) {
                    setIsLoadingReceipt(true);

                    try {
                        const convertedBlob = await heicTo({
                            blob,
                            type: 'image/jpeg',
                        });

                        const fileName = originalFile.name ? originalFile.name.replace(/\.heic$/i, '.jpg') : 'converted-image.jpg';

                        const jpegFile = new File([convertedBlob], fileName, {type: 'image/jpeg'});

                        setReceiptAndNavigate(jpegFile, isPdfValidated);
                    } catch (err) {
                        console.error('Error converting HEIC to JPEG:', err);
                    } finally {
                        setIsLoadingReceipt(false);
                    }
                } else {
                    setReceiptAndNavigate(originalFile, isPdfValidated);
                }
            } catch (err) {
                console.error('Error processing the file:', err);
            }
        } else {
            setReceiptAndNavigate(originalFile, isPdfValidated);
        }
    };

Change setReceiptAndNavigate usage to convertReceipt here here and here

On the other side, the heic-to is incompatible with native platforms as it relies on Workers, which is not supported when using Hermes. The user cannot upload the receipt if it was uploaded from 'Choose File Option'

New-Expensify.mp4

To address this, we can create convertReceipt function using the expo-image-manipulator to convert the receipt on native platforms on index.native.tsx

What alternative solutions did you explore? (Optional)

Being discussed a bit in slack - https://expensify.slack.com/archives/C01GTK53T8Q/p1723093823149789

$500 sounds fair to me 👍

BugZero Checklist:

[Contributor] Classify the bug:

Bug classification

Source of bug:

1a. Result of the original design (eg. a case wasn't considered)
1b. Mistake during implementation
1c. Backend bug
1z. Other:

Where bug was reported:

2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
2b. Reported on staging (eg. found during regression or PR testing)
2d. Reported on a PR
2z. Other:

Who reported the bug:

[Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

Link to comment: Platform issue.
[Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

Link to discussion: Not needed
[Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.
[BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

Link to issue:

Regression Test Proposal

Test:

Open Create request flow.
Add the Receipt image of type heic or heif.
Verify that the image uploads successfully

Do we agree 👍 or 👎

OMG NO WAY! I thought I would never see the day that I could nearly close this issue. I'm so excited. Will pay it out tomorrow!

@nyomanjyotisa

Payment Summary:

Contributor: @nyomanjyotisa to be paid $500 via Upwork
Contributor+: @parasharrajat to be paid $500 via newDot Manual Request

Upwork job here

@parasharrajat

Contributor has been paid, the contract has been completed, and the Upwork post has been closed.

@parasharrajat you have the 🟢 to request via NewDot.

Payment requested as per #47078 (comment)

@parasharrajat

$500 approved for @parasharrajat

Navigation Menu

Repository navigation

[Due for payment 2025-06-11] Unable to upload HEIF image as money request (Web) #47078

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

173 remaining items

BugZero Checklist:

Regression Test Proposal

Test:

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

[Due for payment 2025-06-11] Unable to upload HEIF image as money request (Web) #47078

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Aug 8, 2024

melvin-bot commented on Aug 8, 2024

github-actions commented on Aug 8, 2024

nyomanjyotisa commented on Aug 8, 2024

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Beamanator commented on Aug 8, 2024

173 remaining items

Beamanator commented on Jun 4, 2025

parasharrajat commented on Jun 11, 2025

BugZero Checklist:

Regression Test Proposal

Test:

RachCHopkins commented on Jun 11, 2025

RachCHopkins commented on Jun 16, 2025

RachCHopkins commented on Jun 16, 2025

parasharrajat commented on Jun 27, 2025

JmillsExpensify commented on Jul 9, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions