Merge pull request #85574 from software-mansion-labs/jakubkalinski0/Odometer_unexpected_error_when_submit_expense_with_image

[Odometer] Unexpected error when submit expense with image

Author: Julesssss

src/CONST/index.ts

@@ -2301,6 +2301,7 @@ const CONST = {
         TIF: 'image/tif',
         TIFF: 'image/tiff',
         HEIC: 'image/heic',
+        HEIF: 'image/heif',
         IMG: 'image/*',
         PDF: 'application/pdf',
         MSWORD: 'application/msword',

src/libs/fileDownload/FileUtils.ts

@@ -170,6 +170,27 @@ function getMimeType(fileExtension: string): string {
     return MIME_TYPES[ext] ?? 'application/octet-stream';
 }
 
+/**
+ * Derives an image MIME type from a file URI or filename.
+ * Returns undefined for unrecognized extensions so callers can apply their own fallback.
+ */
+function getMimeTypeFromUri(uri: string): string | undefined {
+    const {fileExtension} = splitExtensionFromFileName(uri.split('/').pop() ?? uri);
+    const ext = fileExtension.toLowerCase();
+    const IMAGE_EXTENSION_TO_MIME: Record<string, string> = {
+        jpg: CONST.SHARE_FILE_MIMETYPE.JPEG,
+        jpeg: CONST.SHARE_FILE_MIMETYPE.JPEG,
+        png: CONST.SHARE_FILE_MIMETYPE.PNG,
+        heic: CONST.SHARE_FILE_MIMETYPE.HEIC,
+        heif: CONST.SHARE_FILE_MIMETYPE.HEIF,
+        webp: CONST.SHARE_FILE_MIMETYPE.WEBP,
+        gif: CONST.SHARE_FILE_MIMETYPE.GIF,
+        tif: CONST.SHARE_FILE_MIMETYPE.TIF,
+        tiff: CONST.SHARE_FILE_MIMETYPE.TIFF,
+    };
+    return ext ? IMAGE_EXTENSION_TO_MIME[ext] : undefined;
+}
+
 /**
  * Returns the filename replacing special characters with underscore
  */
@@ -874,6 +895,7 @@ export {
     createFile,
     validateReceipt,
     normalizeFileObject,
+    getMimeTypeFromUri,
     isValidReceiptExtension,
     getFileValidationErrorText,
     hasHeicOrHeifExtension,

src/libs/stitchOdometerImages/index.native.ts

@@ -1,4 +1,4 @@
-import {Skia} from '@shopify/react-native-skia';
+import {ImageFormat, Skia} from '@shopify/react-native-skia';
 import RNFS from 'react-native-fs';
 import Log from '@libs/Log';
 import type {FileObject} from '@src/types/utils/Attachment';
@@ -41,7 +41,7 @@ async function stitchOdometerImages(image1: FileObject | string | undefined, ima
         surface.flush();
 
         snapshot = surface.makeImageSnapshot();
-        const base64 = snapshot.encodeToBase64();
+        const base64 = snapshot.encodeToBase64(ImageFormat.JPEG, 100);
 
         // Delete any previously stitched files before creating a new one
         try {

src/pages/iou/request/step/IOURequestStepDistanceOdometer.tsx

@@ -29,6 +29,7 @@ import {setMoneyRequestDistance, setMoneyRequestOdometerReading, setMoneyRequest
 import {handleMoneyRequestStepDistanceNavigation} from '@libs/actions/IOU/MoneyRequest';
 import {setDraftSplitTransaction} from '@libs/actions/IOU/Split';
 import DistanceRequestUtils from '@libs/DistanceRequestUtils';
+import {getMimeTypeFromUri} from '@libs/fileDownload/FileUtils';
 import getNonEmptyStringOnyxID from '@libs/getNonEmptyStringOnyxID';
 import {shouldUseTransactionDraft} from '@libs/IOUUtils';
 import Log from '@libs/Log';
@@ -396,7 +397,12 @@ function IOURequestStepDistanceOdometer({
                 (typeof odometerStartImage !== 'string' ? odometerStartImage?.name : odometerStartImage?.split('/').pop()) ??
                 (typeof odometerEndImage !== 'string' ? odometerEndImage?.name : odometerEndImage?.split('/').pop()) ??
                 '';
-            setMoneyRequestReceipt(transactionID, uri, name, isTransactionDraft);
+            const type =
+                stitchedImage?.type ??
+                (typeof odometerStartImage !== 'string' ? odometerStartImage?.type : getMimeTypeFromUri(odometerStartImage)) ??
+                (typeof odometerEndImage !== 'string' ? odometerEndImage?.type : getMimeTypeFromUri(odometerEndImage)) ??
+                'image/jpeg';
+            setMoneyRequestReceipt(transactionID, uri, name, isTransactionDraft, type);
         }
 
         if (isEditing) {

src/pages/iou/request/step/IOURequestStepOdometerImage/index.native.tsx

@@ -183,8 +183,10 @@ function IOURequestStepOdometerImage({
         }
 
         const file = files.at(0);
-        const imageUri = (file as {uri?: string}).uri ?? '';
-        setMoneyRequestOdometerImage(transactionID, imageType, imageUri, isTransactionDraft);
+        if (!file) {
+            return;
+        }
+        setMoneyRequestOdometerImage(transactionID, imageType, file, isTransactionDraft);
         navigateBack();
     };
 
@@ -237,8 +239,18 @@ function IOURequestStepOdometerImage({
                     .then((photo: PhotoFile) => {
                         const imageObject: ImageObject = {file: photo, filename: photo.path, source: getPhotoSource(photo.path)};
                         cropImageToAspectRatio(imageObject, viewfinderLayout.current?.width, viewfinderLayout.current?.height, undefined, photo.orientation)
-                            .then(({source}) => {
-                                setMoneyRequestOdometerImage(transactionID, imageType, source, isTransactionDraft);
+                            .then(({file, filename, source}) => {
+                                setMoneyRequestOdometerImage(
+                                    transactionID,
+                                    imageType,
+                                    {
+                                        uri: source,
+                                        name: filename,
+                                        type: (file as FileObject | undefined)?.type ?? 'image/jpeg',
+                                        size: (file as FileObject | undefined)?.size,
+                                    },
+                                    isTransactionDraft,
+                                );
                                 navigateBack();
                             })
                             .catch((error: unknown) => {