Electron open file/directory in specific application

Question

I'm building a sort of File explorer / Finder using Electron. I want to open some file types with a specific application.

I've tried the approach from this answer: Open external file with Electron

import { spawn } from 'child_process'
spawn('/path/to/app/superApp.app', ['/path/to/file'])

But when I do that, I get a EACCES error as follows.

Is this the right approach? If yes, how can I fix the issue? If not, what is the right approach?

score 85 · Accepted Answer · edited Dec 03 '20 at 17:12

85

You can open a file or folder through shell commands from the electron module. The commands work on both main and renderer process.

const {shell} = require('electron') // deconstructing assignment

shell.showItemInFolder('filepath') // Show the given file in a file manager. If possible, select the file.
shell.openPath('folderpath') // Open the given file in the desktop's default manner.

More info on https://github.com/electron/electron/blob/master/docs/api/shell.md

edited Dec 03 '20 at 17:12

cmcculloh

47,596
40
105
130

answered Jul 16 '17 at 02:04

sawa

1,930
3
24
33

17

And you can also try `shell.showItemInFolder('filepath')` to open the folder and select the file – Bernardo Dal Corno Apr 18 '18 at 13:31
2

I think the original question was how to open a file in a specific application. For example: open a .css file in “Visual Studio Code” and not the default application which might be “Text Edit”. – Florian Schulz May 06 '20 at 07:00
1

I believe you are correct @FlorianSchulz. I updated the accepted answer with what I found at the link originally provided (and accepted by the original question asker). That said, I don't believe this answer actually answers the question asked. – cmcculloh Dec 03 '20 at 17:14

score 3 · Answer 2 · answered Aug 22 '21 at 12:41

While the accepted answer does say how to open the folder in file explorer, it doesn't answer the question on how to open the folder WITH an external program like VSCode. It can be done like so:

import { spawn, SpawnOptions } from "child_process";
import { pathExists } from "fs-extra";

const editorPath = "C:/Program Files/Microsoft VS Code/Code.exe";

export const launchExternalEditor = async (
  folderPath: string
): Promise<void> => {
  const exists = await pathExists(editorPath);
  if (!exists) {
    console.error("editor not found");
  }

  const opts: SpawnOptions = {
    // Make sure the editor processes are detached from the Desktop app.
    // Otherwise, some editors (like Notepad++) will be killed when the
    // Desktop app is closed.
    detached: true,
  };

  spawn(editorPath, [folderPath], opts);
};

This will launch the folder in VSCode as it's root directory. Code is taken from this repository.

Note: this may require some tinkering depending on what program you are trying to use, but so far it worked properly with: VSCode, Visual Studio 2019, Intellij IDEA, NetBeans.

score 0 · Answer 3 · answered Apr 24 '19 at 17:30

For display native system dialogs for opening and saving files, alerting, etc. you can use dialog module from electron package.

const electron = require('electron');
var filePath = __dirname;
console.log(electron.dialog.showOpenDialog)({
  properties:['openFile'],
  filters:[
    {name:'Log', extentions:['csv', 'log']}
  ]
});

A very prompt explanation is provided at Electron Docs.

Electron open file/directory in specific application

3 Answers3

Linked