From 06e12427626a4fa53b7fa2b7778118c5932fd4b3 Mon Sep 17 00:00:00 2001
From: Jahan Ravi <astronaut@Jahans-MacBook-Air.local>
Date: Sat, 15 Nov 2025 12:49:27 +0530
Subject: [PATCH] fixed image preview by replacing localfile:// with dataURL
 loader and adding read-file-dataurl IPC handler

---
 electron/main/index.ts          |  7 +++++++
 electron/preload/index.ts       |  3 +++
 src/components/Folder/index.tsx | 36 ++++++++++++++++++++++-----------
 3 files changed, 34 insertions(+), 12 deletions(-)

diff --git a/electron/main/index.ts b/electron/main/index.ts
index db2c2abc8..22a6ace0a 100644
--- a/electron/main/index.ts
+++ b/electron/main/index.ts
@@ -16,6 +16,7 @@ import { copyBrowserData } from './copy'
 import { findAvailablePort } from './init'
 import kill from 'tree-kill';
 import { zipFolder } from './utils/log'
+import mime from "mime";
 import axios from 'axios';
 import FormData from 'form-data';
 import { checkAndInstallDepsOnUpdate, PromiseReturnType, getInstallationStatus } from './install-deps'
@@ -398,6 +399,12 @@ function registerIpcHandlers() {
     }
   });
 
+  ipcMain.handle("read-file-dataurl", async (event, filePath) => {
+  const file = fs.readFileSync(filePath);
+  const mimeType = mime.getType(path.extname(filePath)) || "application/octet-stream";
+  return `data:${mimeType};base64,${file.toString("base64")}`;
+});
+
   // ==================== log export handler ====================
   ipcMain.handle('export-log', async () => {
     try {
diff --git a/electron/preload/index.ts b/electron/preload/index.ts
index 26d3ee438..8df2906d8 100644
--- a/electron/preload/index.ts
+++ b/electron/preload/index.ts
@@ -1,6 +1,8 @@
 import { ipcRenderer, contextBridge } from 'electron'
 
 
+
+
 contextBridge.exposeInMainWorld('ipcRenderer', {
   on(...args: Parameters<typeof ipcRenderer.on>) {
     const [channel, listener] = args
@@ -59,6 +61,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   executeCommand: (command: string,email:string) => ipcRenderer.invoke('execute-command', command,email),
   // file operations
   readFile: (filePath: string) => ipcRenderer.invoke('read-file', filePath),
+  readFileAsDataUrl: (path : string) => ipcRenderer.invoke("read-file-dataurl", path),
   deleteFolder: (email: string) => ipcRenderer.invoke('delete-folder', email),
   getMcpConfigPath: (email: string) => ipcRenderer.invoke('get-mcp-config-path', email),
   // install dependencies related API
diff --git a/src/components/Folder/index.tsx b/src/components/Folder/index.tsx
index aed6ae65f..44d6fe40c 100644
--- a/src/components/Folder/index.tsx
+++ b/src/components/Folder/index.tsx
@@ -575,18 +575,7 @@ export default function Folder({ data }: { data?: Agent }) {
 										"svg",
 								  ].includes(selectedFile.type.toLowerCase()) ? (
 									<div className="flex items-center justify-center h-full">
-										<img
-											src={
-												selectedFile.isRemote
-													? "localfile://" +
-													  encodeURIComponent(selectedFile.content as string)
-													: `localfile://${encodeURIComponent(
-															selectedFile.path
-													  )}`
-											}
-											alt={selectedFile.name}
-											className="max-w-full max-h-full object-contain"
-										/>
+										<ImageLoader selectedFile={selectedFile} />
 									</div>
 								) : (
 									<pre className="text-sm text-zinc-700 font-mono whitespace-pre-wrap break-words overflow-x-auto">
@@ -617,3 +606,26 @@ export default function Folder({ data }: { data?: Agent }) {
 		</div>
 	);
 }
+
+function ImageLoader({ selectedFile }: { selectedFile: FileInfo }) {
+    const [src, setSrc] = useState("");
+
+    useEffect(() => {
+        const filePath = selectedFile.isRemote
+            ? (selectedFile.content as string)
+            : selectedFile.path;
+
+        window.electronAPI
+            .readFileAsDataUrl(filePath)
+            .then(setSrc)
+            .catch((err: any) => console.error("Image load error:", err));
+    }, [selectedFile]);
+
+    return (
+        <img
+            src={src}
+            alt={selectedFile.name}
+            className="max-w-full max-h-full object-contain"
+        />
+    );
+}