fix: Open Original File Button in Image Details Panel (#536)fix: Open Original File Button in Image Details Panel (#536)

[ShivaGupta-14]

Solves Issue #536

There was an issue in MediaInfoPanel.tsx under Image Details where the Open Original File Button did not open the file. This PR fixes the problem by using the correct Tauri API.
css
Path -> frontend\src\components\Media\MediaInfoPanel.tsx

Approach

• Problem:

  • window.open() only works with URLs, not local files in a native desktop environment. For local files in desktop app, it
    may not work as expected.”

• Solution:

  • Replaced window.open() with Tauri’s shell API.
  • Used open() from @tauri-apps/plugin-shell, which correctly opens local files with their default system applications.

Testing Done

• Verified that clicking Open Original File now opens the image in its default system viewer.
• Click here to see the update

Summary by CodeRabbit

• Bug Fixes

  • “Open Original File” now launches the file using the system’s default application for more reliable, cross-platform behavior and to avoid opening a browser tab.

• Style

  • The “Open Original File” button shows a pointer cursor on hover to better indicate it’s clickable.

[coderabbitai]

Walkthrough

Replaces browser-based window.open with Tauri shell open for the “Open Original File” action in MediaInfoPanel, adds an import for the Tauri shell, updates the button styling to include a pointer cursor, and changes the click handler to async with try/catch error handling. No public API changes.

Changes

Cohort / File(s)	Summary of edits
Media file open mechanism frontend/src/components/Media/MediaInfoPanel.tsx	Import open from @tauri-apps/plugin-shell; change button onClick handler to async and wrap await open(currentImage.path) in a try/catch; previously used window.open(currentImage.path, '_blank'); add cursor-pointer to the button class; no exported/public API changes.

Sequence Diagram(s)

sequenceDiagram
    autonumber
    actor User
    participant UI as MediaInfoPanel (React)
    participant Shell as Tauri Shell
    participant OS as OS File Handler

    User->>UI: Click "Open Original File"
    UI-->>UI: async handler, try { await open(path) } catch (err)
    UI->>Shell: open(currentImage.path)
    Note right of Shell: Invoke native shell to open file path
    Shell->>OS: Launch associated app with file
    OS-->>User: File opens in default application
    alt error
        Shell-->>UI: error
        UI-->>User: (handle/report error)
    end

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

• rahulharpal1603

Poem

A click, a hop—no tabs to show,
I nudge the shell and off we go.
The path now opens, native bright,
A carrot trail in system light.
Thump-thump! I launched it clean and spry—🥕✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Title Check	⚠️ Warning	The title correctly references the key change—fixing the Open Original File button in the Image Details Panel—but it is repeated verbatim and includes the PR number, making it redundant and cluttered rather than concise.	Please remove the duplicated text and omit the PR number to keep the title concise, for example: “fix: Use Tauri shell API for Open Original File button in Image Details Panel.”

✅ Passed checks (2 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🧹 Nitpick comments (1)

frontend/src/components/Media/MediaInfoPanel.tsx (1)

134-136: Consider adding path validation for security.

Per security best practices for the Tauri shell plugin, validate that currentImage.path is a legitimate file path before passing it to open(). While the path comes from application data rather than direct user input, adding validation provides defense in depth.

Based on learnings.

Consider adding validation like:

if (currentImage?.path) {
  const isValidPath = /^[a-zA-Z]:[\\\/]|^\//.test(currentImage.path); // Basic absolute path check
  if (!isValidPath) {
    console.error('Invalid file path format');
    return;
  }
  try {
    await open(currentImage.path);
  } catch (error) {
    console.error('Failed to open file:', error);
  }
}

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3363268 and e2482cc.

📒 Files selected for processing (1)

• frontend/src/components/Media/MediaInfoPanel.tsx (2 hunks)

🔇 Additional comments (2)

frontend/src/components/Media/MediaInfoPanel.tsx (2)

132-132: LGTM: Good UX improvement.

Adding cursor-pointer provides better visual feedback for the clickable button.

---

2-2: Tauri shell plugin registration verified Import of open and backend plugin initialization are correct.

[rahulharpal1603]

LGTM!
Thanks @ShivaGupta-14