What are the ways to make an html link open a folder

Do you want to open a shared folder in Windows Explorer? You need to use a file: link, but there are caveats:

• Internet Explorer will work if the link is a converted UNC path (file://server/share/folder/).
• Firefox will work if the link is in its own mangled form using five slashes (file://///server/share/folder) and the user has disabled the security restriction on file: links in a page served over HTTP. Thankfully IE also accepts the mangled link form.
• Opera, Safari and Chrome can not be convinced to open a file: link in a page served over HTTP.

The URL file://[servername]/[sharename] should open an explorer window to the shared folder on the network.

A bit late to the party, but I had to solve this for myself recently, though slightly different, it might still help someone with similar circumstances to my own.

I'm using xampp on a laptop to run a purely local website app on windows. (A very specific environment I know). In this instance, I use a html link to a php file and run:

shell_exec('cd C:\path\to\file');
shell_exec('start .');

This opens a local Windows explorer window.

make sure your folder permissions are set so that a directory listing is allowed then just point your anchor to that folder using chmod 701 (that might be risky though) for example

<a href="./downloads/folder_i_want_to_display/" >Go to downloads page</a>

make sure that you have no index.html any index file on that directory

What I resolved doing is installing a local web service on every person's computer that listens on port 9999 for example and opens a directory locally when told to. My example node.js express app:

import { createServer, Server } from "http";

// server
import express from "express";
import cors from "cors";
import bodyParser from "body-parser";

// other
import util from 'util';
const exec = util.promisify(require('child_process').exec);

export class EdsHelper {
    debug: boolean = true;
    port: number = 9999
    app: express.Application;
    server: Server;

    constructor() {
        // create app
        this.app = express();
        this.app.use(cors());
        this.app.use(bodyParser.json());
        this.app.use(bodyParser.urlencoded({
            extended: true
        }));

        // create server
        this.server = createServer(this.app);

        // setup server
        this.setup_routes();
        this.listen();
        console.info("server initialized");
    }

    private setup_routes(): void {
        this.app.post("/open_dir", async (req: any, res: any) => {
            try {
                if (this.debug) {
                    console.debug("open_dir");
                }

                // get path
                // C:\Users\ADunsmoor\Documents
                const path: string = req.body.path;

                // execute command
                const { stdout, stderr } = await exec(`start "" "${path}"`, {
                    // detached: true,
                    // stdio: "ignore",
                    //windowsHide: true,    // causes directory not to open sometimes?
                });

                if (stderr) {
                    throw stderr;
                } else {
                    // return OK
                    res.status(200).send({});
                }
            } catch (error) {
                console.error("open_dir >> error = " + error);
                res.status(500).send(error);
            }
        });
    }

    private listen(): void {
        this.server.listen(this.port, () => {
            console.info("Running server on port " + this.port.toString());
        });
    }

    public getApp(): express.Application {
        return this.app;
    }

}

It is important to run this service as the local user and not as administrator, the directory may never open otherwise.
Make a POST request from your web app to localhost: http://localhost:9999/open_dir, data: { "path": "C:\Users\ADunsmoor\Documents" }.

Hope it will help someone someday. I was making a small POC and came across this. A button, onClick display contents of the folder. Below is the HTML,

<input type=button onClick="parent.location='file:///C:/Users/' " value='Users'>

I was looking for File System Access API and ended up in this question.

I know that API doesn't allow one to open an html link to a folder, but it does allow for opening local folders and files. For more information, take a look here:

https://web.dev/file-system-access/