How to open the windows file explorer on NWJS?

Question

Today I tried to open the windows file explorer at a specific location using NWJS and allow the user to open any file. The software needs to keep running after the shortcut's open. The problem is all I find do not work as intended.

The shortcut path is in an string accessible by s.shortcut

I tried :

1. showOpenFilePicker(s.shortcut) which opens the file picker, but don't allow the user to open any file and can't be opened at a specific location except default ones (documents, image, desktop, etc).
2. window.open("file://" + s.shortcut) which opens a web file explorer in the software itself, closing the program when closing the explorer and doesn't allow to open file.
3. window.open("file://" + s.shortcut, "explorer", "popup") opens it in a web file explorer that doesn't close the program when exited, but still doesn't allow to open any file, only downloading them

I can't find any other things that will work. Also, please note I'm using NWJS which has some access to the user's computer.

Thank you in advance for any help or edit.

Answer 1

I found a way on node, if needed you can use the nodejs package open-file-explorer by doing :

const openExplorer = require('open-file-explorer');
openExplorer(s.shortcut, err => {
    if(err) {
        console.log(err);
    }
    else {
        //Do Something
    }
});

Answer 2

NW provides excellent file and directory pickers with no limits whatsoever, so why would you want to use the crippled showOpenFilePicker?

For access to the local file system use:

File picker with a specific location to start...

<input type="file" nwworkingdir="/home/path/">

Open an image file picker...

<input type="file" accept="image/*" onchange="">

Multi-file picker for uploading etc...

<input type="file" multiple>

A "Save as.." dialog box for saving files...

<input type="file" nwsaveas="filename.txt">

A directory (folder) picker...

<input type="file" nwdirectory>

NB: You can alter the special attributes (nwsaveas/nwworkingdir) dynamically with...

File_Picker_ID.setAttribute('nwsaveas','logo.png');

File_Picker_ID.setAttribute('nwworkingdir','C:/');

Online documentation...

https://nwjs.readthedocs.io/en/latest/References/Changes%20to%20DOM/

Addressing your specific problem here's how I load any viewable file from the disk, into an iframe...

<input type="file" id="Open" accept="audio/*,video/*,image/*,text/plain,text/html,application/pdf" nwworkingdir="C:\" onchange="if(this.value!==''){AddNewTab(this.value.replace(/\\/g,'/'),0,true); this.value='';}">

AddNewTab() is my function that creates an iframe and sets the selected file path as the iframe's source but the most important part is that we have to change the backward slashes to forward slashes.

So instead of this for the file path...

"file://" + s.shortcut  <--- Btw, should be 3 f-slashes file:///

Use this...

s.shortcut.replace(/\\/g,'/')

I hope this helps.

Answer 3

HTML5 snippet using Font Awesome:

<div id="file_open" class="YOUR_COOL_STYLE" onclick="openFileDialog(this)"><i class="fa fa-file"></i></div>

At the end of HTML5 file but before the script tag:

<!-- Dialogs -->
<div>
    <input style="display:none;" id="fileDialog" type="file" /> <!-- This is for selecting a file with path. -->
    <input style="display:none;" id="directoryDialog" type="file" nwdirectory nwdirectorydesc="Please select a folder"/> <!-- That explains itself. -->     
</div>

Javascript:

function openFileDialog(caller) {
    chooseFile('#fileDialog'); 
}

Now you have the path and filename and can open it inside your Web-App or with an editor of your choice. Usually an Express.js Server is running to serve content like this. From there You could open an Editor or spawn a process using Python.