How to open local file from browser?

Question

I'm using the following when trying to open a local file:

<a href="file:///Users/username/Dropbox/Documents/a/some document.numbers">some document</a>

When I click the above in a browser, it opens Finder to the folder. But does not open the file. Should I be doing something else to have the file open in Numbers?

Answer 1

You cannot open local files on the client. This would be a huge security risk.

You can link to files on your server (like you did) or you can ask the client for a file using <input type="file">

Answer 2

You can only open some types of files in browsers, like html css js and mp4, otherwise the browser will want to download it. Also remember that browsers replace spaces with %20. I recommend right clicking the file and opening it with chrome then copy that link and using it.

You can open files that are local as long as it is a file that is on the file that is trying to open another file is local.

Answer 3

Your issue is likely the space in the document name. Try this instead:

<a href="file:///Users/username/Dropbox/Documents/a/some%20document.numbers">some document</a>

The %20 will be read by your browser as a space.

Update
The other answer points out something I missed. The .numbers extension will not be able to be opened directly by your browser. Additionally the other answer describes the security risk this could create.

Answer 4

The File API in HTML 5 now allows you to work with local files directly from JS (after basic user interaction in selecting the file(s), for security).

From the Mozilla File API docs:

"The File interface provides information about files and allows JavaScript in a web page to access their content.
File objects are generally retrieved from a FileList object returned as a result of a user selecting files using the <input> element, from a drag and drop operation's DataTransfer object, or from the mozGetAsFile() API on an HTMLCanvasElement."

For more info and code examples, see the sample demo linked from the same article.

Answer 5

This might not be what you're trying to do, but someone out there may find it helpful:

If you want to share a link (by email for example) to a network file you can do so like this:

file:///Volumes/SomeNetworkFolder/Path/To/file.html

This however also requires that the recipient connects to the network folder in finder --- in menu bar,

Go > Connect to Server

enter server address (e.g. file.yourdomain.com - "SomeNetworkFolder" will be inside this directory) and click Connect. Now the link above should work.

Answer 6

Here is the alternative way to download local file by client side and server side effort:

 <a onclick='fileClick(this)' href="file://C:/path/to/file/file.html"/>

js:

function fileClick(a) {

    var linkTag = a.href;
    var substring = "file:///";
    if (linkTag.includes(substring)) {
        var url = '/v/downloadLocalfile?path=' + 
     encodeURIComponent(linkTag);
        fileOpen(url);
    }
    else {
        window.open(linkTag, '_blank');
    }
}

function fileOpen(url) {
    $.ajax({
        url: url,
        complete: function (jqxhr, txt_status) {
            console.log("Complete: [ " + txt_status + " ] " + jqxhr);
            if (txt_status == 'success') {
                window.open(url, '_self');
            }
            else {
                alert("File not found[404]!");
            }
            // }
        }
    });
}

Server side[java]:

 @GetMapping("/v/downloadLocalfile")
  
  public void downloadLocalfile(@RequestParam String path, HttpServletResponse 
    response) throws IOException, JRException {
     try {
      String nPath = path.replace("file:///", "").trim();
      File file = new File(nPath);
      String fileName = file.getName();
    
      response.setHeader("Content-Disposition", "attachment;filename=" +  
       fileName);
      if (file.exists()) {
        FileInputStream in = new FileInputStream(file);
        response.setStatus(200);
        OutputStream out = response.getOutputStream();
        byte[] buffer = new byte[1024];

        int numBytesRead;
        while ((numBytesRead = in.read(buffer)) > 0) {
            out.write(buffer, 0, numBytesRead);
        }
        // out.flush();
        in.close();
        out.close();
    }
    else {
        response.setStatus(404);
    }
  } catch (Exception ex) {
     logger.error(ex.getLocalizedMessage());
  }
return;
}

Answer 7

You can expose your entire file system in your browser by using an http server.

caddy2 server

caddy file-server --listen :2022 --browse --root /

• serves the root file system at http://localhost:2022/

python3 built-in server

python3 -m http.server

• serves current dir on http://localhost:8000/

python2 built-in server

python3 -m SimpleHTTPServer

• serves current dir on http://localhost:8000/

This s