feat: enhance TakePicture and TakePictureAdvanced to support online uploads with nativePayload

Author: YogendraShelke

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

@@ -126,6 +126,12 @@ export async function TakePicture(
                     const filename = /[^\/]*$/.exec(uri)![0];
                     const filePathWithoutFileScheme = uri.replace("file://", "");
 
+                    // Set nativePayload so the patched FormData.prototype.append in NativeFileBackend
+                    // replaces the blob value with { uri, name, type } for online uploads. The patch
+                    // reads the third append() argument (fileName) and writes it onto nativePayload.name,
+                    // which FormData.getParts() uses as the Content-Disposition filename.
+                    (blob as any).nativePayload = { uri: `file://${uri}`, name: filename, type: "*/*" };
+
                     mx.data.saveDocument(
                         imageObject.getGuid(),
                         filename,

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

@@ -179,6 +179,12 @@ export async function TakePictureAdvanced(
                     const filename = /[^\/]*$/.exec(uri)![0];
                     const filePathWithoutFileScheme = uri.replace("file://", "");
 
+                    // Set nativePayload so the patched FormData.prototype.append in NativeFileBackend
+                    // replaces the blob value with { uri, name, type } for online uploads. The patch
+                    // reads the third append() argument (fileName) and writes it onto nativePayload.name,
+                    // which FormData.getParts() uses as the Content-Disposition filename.
+                    (blob as any).nativePayload = { uri: `file://${uri}`, name: filename, type: "*/*" };
+
                     mx.data.saveDocument(
                         imageObject.getGuid(),
                         filename,

packages/jsActions/nanoflow-actions-native/CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ## [Unreleased]
 
+-   Fixed an issue where base64-to-image decoding was failing.
+
+## [7.2.0] Nanoflow Commons - 2026-7-3
+
 -   Close offline database connection before navigating between pages with OpenURL nanoflow action.
 
 ## [7.1.0] Nanoflow Commons - 2026-6-5

packages/jsActions/nanoflow-actions-native/src/other/Base64DecodeToImage.ts

@@ -7,6 +7,7 @@
 // Other code you write will be lost the next time you deploy the project.
 import { Base64 } from "js-base64";
 import RNBlobUtil from "react-native-blob-util";
+import { NativeModules } from "react-native";
 
 // BEGIN EXTRA CODE
 // END EXTRA CODE
@@ -45,21 +46,38 @@ export async function Base64DecodeToImage(base64: string, image: mendix.lib.MxOb
             }
 
             // Create a temporary file path
-            const tempPath = `${RNBlobUtil.fs.dirs.CacheDir}/temp_image_${Date.now()}.png`;
+            const fileName = `image_${Date.now()}.png`;
+            const tempPath = `${RNBlobUtil.fs.dirs.CacheDir}/${fileName}`;
 
             // Write Base64 data to a temporary file
             await RNBlobUtil.fs.writeFile(tempPath, cleanBase64, "base64");
 
-            // Fetch the file as a blob
-            const res = await fetch(`file://${tempPath}`);
-            const blob = await res.blob();
+            // Read the file into the native blob store so offline mode works:
+            // NativeFileBackend.storeFile calls NativeFileSystem.save(blob.data, path)
+            // and blob.close() — a plain object has no .data getter or .close(), which
+            // crashes iOS via [NSInvocation invokeWithTarget:].
+            const nativeBlob = await NativeModules.MxFileSystem.read(tempPath.replace("file://", ""));
+            // Normalize: MxFileSystem.read may return 'length' instead of 'size'.
+            const blobData = { ...(nativeBlob as any) };
+            if (blobData.size === undefined && blobData.length !== undefined) {
+                blobData.size = blobData.length;
+            }
+            const blob = new Blob();
+            Object.assign(blob, { data: blobData });
+
+            // Set nativePayload so the patched FormData.prototype.append in NativeFileBackend
+            // replaces the blob value with { uri, name, type } for online uploads. The patch
+            // reads the third append() argument (fileName) and writes it onto nativePayload.name,
+            // which FormData.getParts() uses as the Content-Disposition filename.
+            (blob as any).nativePayload = { uri: `file://${tempPath}`, name: fileName, type: "image/png" };
+            const fileBlob = blob as Blob;
 
             return new Promise((resolve, reject) => {
                 mx.data.saveDocument(
                     image.getGuid(),
-                    "camera image",
+                    fileName,
                     {},
-                    blob,
+                    fileBlob,
                     () => {
                         RNBlobUtil.fs.unlink(tempPath).catch(e => console.info("Temp file cleanup failed:", e));
                         resolve(true);