Open File Explorer Window from JavaScript

How Can I Open My File explorer using HTML / JS

You can't open application with javascript pure , Because they are on the front-end side .


I have two ideas for this

One use the input:file tag:

<input type="file" />​

Two, use your local network path:

window.open("file:///" + yourLocalOrNetworkPath);

Open Windows Explorer from Javascript

Figured it out... Simply run shell script on your JS code!
Node.js

var exec = require('child_process').exec, child;

var isWin = /^win/.test(process.platform); // possible outcomes -> 'darwin', 'freebsd', 'linux', 'sunos' or 'win32'

exec((isWin?'start ':'open ') + name,
    function (error, stdout, stderr) {
        if (error !== null) {
            console.log('exec error: ' + error);
        }
    }
);

I need to open the the file explorer on the click of a CUSTOM BUTTON so that i can select a file. And that file name has to appear in the INPUT field

You can use a file input and place it inside a button tag which you can customize to look however you want. Put a ref on the file input. When you click on the button, you can then call the click() method of file input, which will open the file explorer. You can select the file using the files property of file input and set it to a variable.

export default function App() {
  const fileRef = React.useRef();
  let [file, setFile] = React.useState();
  const handleChange = (event) => {
    setFile(event.target.files[0]);
  };

  return (
    <div>
      <button onClick={() => fileRef.current.click()}>
        <input id="upload" name="upload" type="file" ref={fileRef} hidden
          onChange={handleChange} />
        Upload File
      </button>
      { file &&  file!==undefined && file!==null &&
        <div>
          <p>{file.name}</p>
          <p>{file.size}</p>
          <p>{file.type}</p>
        </div>
      }    
    </div>
  );
}

Check out this link for more file properties you can access

Launch a Windows File Explorer window from a webpage

No, it isn't possible to launch an external program from within a web page.

If you could do it, it would be considered a massive security risk, and would quickly be blocked by the browser makers.

Years ago, there used to be ways to achieve this sort of thing via ActiveX controls, but that is no longer an option, largely due to the security issues it caused.

The only browser that ever supported ActiveX was IE; it doesn't work at all in any of the other browsers, and even IE defaults to block unknown ActiveX controls these days.

In short, you aren't going to be able to do this. Sorry.

Can I open a Windows Explorer window from a web app?

One possibility is to register a custom URI protocol handler with the user's operating system, and then your web page can contain links using your custom protocol, such as openfolder://c/path/to/folder This sort of customization is probably most commonly seen in practice with itunes:// links.

A quick Google search led me to this decent looking tutorial: https://support.shotgunsoftware.com/hc/en-us/articles/200213756-How-to-launch-external-applications-using-custom-protocols-rock-instead-of-http-

The downside is that the user will have to run a small installer of some sort in order to set the correct registry entries (or whatever the non-Windows equivalent is for other OSes) and to drop a small script on disk. That would be much lighter-weight than running a node.js server like you proposed, though.

The linked tutorial uses a Python script, but even that is probably overkill for your needs. A batch file would likely suffice.

EDIT: One additional note, please be aware of the security implications of implementing a custom handler like this. Any webpage in any browser can potentially take advantage of your custom protocol, and an attacker would be able to pass arbitrary data to your script. You should take steps to ensure that the script will not accidentally execute arbitrary commands that may be injected by a malicious web page, and that it will only open a folder and nothing else.

How to open a local folder in explorer through a Chrome App Mode window?

you can do this in your html file

<form action="file://ip_addr/shared_folder/">
    <input type="submit" value="Go to folder" />
</form>

P.S. I think you must have the network share mounted on your computer, for example if you want to access to "192.168.1.55/file" you must at least mount a folder from 192.168.1.55 with the same credential of /file

---

Related Topics