fix: add native payload to blob in TakePicture and TakePictureAdvanced functions

Author: YogendraShelke

packages/jsActions/mobile-resources-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+### Fixed
+
+-   We fixed an issue where the TakePicture and TakePictureAdvanced actions could fail to upload images by not passing the native file payload metadata required by the upload flow.
+
 ## [11.4.1] Native Mobile Resources - 2026-3-14
 
 ## [2.0.2] GalleryTextFilter

packages/jsActions/mobile-resources-native/src/camera/TakePicture.ts

@@ -19,6 +19,17 @@ import { getLocales } from "react-native-localize";
 import { ImagePickerV2Options, ImagePickerV2Response, PictureQuality, PictureSource } from "../../typings/Camera";
 
 // BEGIN EXTRA CODE
+
+type NativePayload = {
+    uri: string;
+    name: string;
+    type: string;
+};
+
+type BlobWithNativePayload = Blob & {
+    nativePayload?: NativePayload;
+};
+
 // END EXTRA CODE
 
 /**
@@ -124,12 +135,19 @@ export async function TakePicture(
                     // eslint-disable-next-line no-useless-escape
                     const filename = /[^\/]*$/.exec(uri)![0];
                     const filePathWithoutFileScheme = uri.replace("file://", "");
+                    const blobWithNativePayload = blob as BlobWithNativePayload;
+
+                    blobWithNativePayload.nativePayload = {
+                        uri,
+                        name: filename,
+                        type: blob.type
+                    };
 
                     mx.data.saveDocument(
                         imageObject.getGuid(),
                         filename,
                         {},
-                        blob,
+                        blobWithNativePayload,
                         async () => {
                             await NativeModules.MendixNative.fsRemove(filePathWithoutFileScheme);
 
@@ -322,7 +340,7 @@ export async function TakePicture(
         );
     }
 
-    function handleImagePickerV4Error(errorCode: ErrorCode, errorMessage?: string) {
+    function handleImagePickerV4Error(errorCode: ErrorCode, errorMessage?: string): void {
         switch (errorCode) {
             case "camera_unavailable":
                 showAlert("The camera is unavailable", "");

packages/jsActions/mobile-resources-native/src/camera/TakePictureAdvanced.ts

@@ -19,6 +19,15 @@ import { getLocales } from "react-native-localize";
 import { ImagePickerV2Options, ImagePickerV2Response, PictureQuality, PictureSource } from "../../typings/Camera";
 
 // BEGIN EXTRA CODE
+type NativePayload = {
+    uri: string;
+    name: string;
+    type: string;
+};
+
+type BlobWithNativePayload = Blob & {
+    nativePayload?: NativePayload;
+};
 // END EXTRA CODE
 
 /**
@@ -177,12 +186,19 @@ export async function TakePictureAdvanced(
                     // eslint-disable-next-line no-useless-escape
                     const filename = /[^\/]*$/.exec(uri)![0];
                     const filePathWithoutFileScheme = uri.replace("file://", "");
+                    const blobWithNativePayload = blob as BlobWithNativePayload;
+
+                    blobWithNativePayload.nativePayload = {
+                        uri,
+                        name: filename,
+                        type: blob.type
+                    };
 
                     mx.data.saveDocument(
                         imageObject.getGuid(),
                         filename,
                         {},
-                        blob,
+                        blobWithNativePayload,
                         async () => {
                             await NativeModules.MendixNative.fsRemove(filePathWithoutFileScheme);
 
@@ -385,7 +401,7 @@ export async function TakePictureAdvanced(
         });
     }
 
-    function handleImagePickerV4Error(errorCode: ErrorCode, errorMessage?: string) {
+    function handleImagePickerV4Error(errorCode: ErrorCode, errorMessage?: string): void {
         switch (errorCode) {
             case "camera_unavailable":
                 showAlert("The camera is unavailable.", "");