CODEWITHSUNDEEP
htmldirectoryhyperlink
Sebastien Lachance
Sebastien Lachance

Reputation: 2007

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

I need to let users of an application open a folder by clicking a link inside a web page. The path of the folder is on the network and can be accessed from everywhere. I'm probably sure there is no easy way to do this, but maybe I'm mistaken?

Upvotes: 132

Views: 539862

Answers (10)

marcelocra
marcelocra

Reputation: 2493

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/

Upvotes: 3

xinthose
xinthose

Reputation: 3830

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" }.

Upvotes: 6

Nagaraja JB
Nagaraja JB

Reputation: 753

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'>

Upvotes: 1

Lucas Taulealea
Lucas Taulealea

Reputation: 395

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.

Upvotes: 10

highlycaffeinated
highlycaffeinated

Reputation: 19867

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

Upvotes: 9

Wyrmwood
Wyrmwood

Reputation: 3591

You can also copy the link address and paste it in a new window to get around the security. This works in chrome and firefox but you may have to add slashes in firefox.

Upvotes: 3

luison
luison

Reputation: 2100

Does not work in Chrome, but this other answers suggests a solution via a plugin:

Can Google Chrome open local links?

Upvotes: 3

Bickie
Bickie

Reputation: 71

Using file:///// just doesn't work if security settings are set to even a moderate level.

If you just want users to be able to download/view files* located on a network or share you can set up a Virtual Directory in IIS. On the Properties tab make sure the "A share located on another computer" is selected and the "Connect as..." is an account that can see the network location.

Link to the virtual directory from your webpage (e.g. http://yoursite/yourvirtualdir/) and this will open up a view of the directory in the web browser.

*You can allow write permissions on the virtual directory to allow users to add files but not tried it and assume network permissions would override this setting.

Upvotes: 7

Andrew Duffy
Andrew Duffy

Reputation: 6928

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.

Upvotes: 125

lock
lock

Reputation: 6614

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

Upvotes: 5

Related Questions