Fix: Open Original File button not working in Image Details panel #688

Author: NikhilPatil2005

frontend/src-tauri/src/main.rs

@@ -5,6 +5,24 @@ mod services;
 
 use tauri::path::BaseDirectory;
 use tauri::Manager;
+    
+// Correct Tauri v2 opener command
+#[tauri::command]
+async fn open_original_file(path: String) -> Result<(), String> {
+    println!("Tauri received path: {}", path);
+
+    match tauri_plugin_opener::open_path(&path, None::<String>) {
+        Ok(_) => {
+            println!("File opened successfully");
+            Ok(())
+        }
+        Err(e) => {
+            eprintln!("Failed to open file: {}", e);
+            Err(e.to_string())
+        }
+    }
+}
+
 
 fn main() {
     tauri::Builder::default()
@@ -22,7 +40,10 @@ fn main() {
             println!("Resource path: {:?}", resource_path);
             Ok(())
         })
-        .invoke_handler(tauri::generate_handler![services::get_server_path,])
+        .invoke_handler(tauri::generate_handler![
+            services::get_server_path,
+            open_original_file,   // ⭐ Register command
+        ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
 }

frontend/src/components/Media/MediaInfoPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { open } from '@tauri-apps/plugin-shell';
+import { invoke } from '@tauri-apps/api/core'; // Correct Tauri v2 import
+
 import {
   X,
   ImageIcon as ImageLucide,
@@ -42,7 +43,6 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
 
   const getImageName = () => {
     if (!currentImage) return 'Image';
-    // Handle both Unix (/) and Windows (\) path separators
     return currentImage.path?.split(/[/\\]/).pop() || 'Image';
   };
 
@@ -51,7 +51,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
       const { latitude, longitude } = currentImage.metadata;
       const url = `https://maps.google.com/?q=${latitude},${longitude}`;
       try {
-        await open(url);
+        await invoke('open_original_file', { path: url });
       } catch (error) {
         console.error('Failed to open map URL:', error);
       }
@@ -74,6 +74,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
       </div>
 
       <div className="space-y-4 text-sm">
+        {/* Name */}
         <div className="flex items-start gap-3">
           <div className="rounded-lg bg-white/10 p-2">
             <ImageLucide className="h-5 w-5 text-blue-400" />
@@ -89,6 +90,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           </div>
         </div>
 
+        {/* Date */}
         <div className="flex items-start gap-3">
           <div className="rounded-lg bg-white/10 p-2">
             <Calendar className="h-5 w-5 text-emerald-400" />
@@ -99,6 +101,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           </div>
         </div>
 
+        {/* Location */}
         <div className="flex items-start gap-3">
           <div className="rounded-lg bg-white/10 p-2">
             <MapPin className="h-5 w-5 text-red-400" />
@@ -122,6 +125,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           </div>
         </div>
 
+        {/* Tags */}
         <div className="flex items-start gap-3">
           <div className="rounded-lg bg-white/10 p-2">
             <Tag className="h-5 w-5 text-purple-400" />
@@ -145,6 +149,7 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           </div>
         </div>
 
+        {/* Position */}
         <div className="flex items-start gap-3">
           <div className="rounded-lg bg-white/10 p-2">
             <Info className="h-5 w-5 text-amber-400" />
@@ -157,13 +162,17 @@ export const MediaInfoPanel: React.FC<MediaInfoPanelProps> = ({
           </div>
         </div>
 
+        {/* OPEN ORIGINAL FILE — FIXED */}
         <div className="mt-4 border-t border-white/10 pt-3">
           <button
             className="w-full cursor-pointer rounded-lg bg-white/10 py-2 text-white transition-colors hover:bg-white/20"
             onClick={async () => {
               if (currentImage?.path) {
                 try {
-                  await open(currentImage.path);
+                  console.log('Sending path to Tauri:', currentImage.path);
+                  await invoke('open_original_file', {
+                    path: currentImage.path,
+                  });
                 } catch (error) {
                   console.error('Failed to open file:', error);
                 }