askvity

How to open file explorer in HTML?

Published in File Management 3 mins read

To open a file or folder using HTML, you need to utilize the <a> tag with the href attribute, specifying the file path or folder path.

Opening Files or Folders with HTML

HTML itself cannot directly "open" the file explorer application in the same way a user might through their operating system's interface. However, it can create links that, when clicked, will attempt to navigate the user to a specific file or directory on their local machine. This relies on the browser's ability to handle the specific protocol defined by the path in href.

Using <a> tag with "file://"

To link to a specific file or folder from your local storage:

  • Use the <a> tag.
  • In the href attribute, use file:// followed by the absolute path to the file or folder.
   <a href="file:///C:/Users/YourUserName/Documents/MyFolder">Open My Folder</a>
   <a href="file:///C:/Users/YourUserName/Documents/my_document.pdf">Open My PDF</a>

Important Notes:

  • Security Restrictions: Browsers have strict security policies and might block or prompt users before allowing access to local files. The exact behavior can differ between browsers.
  • File Paths: Use the correct absolute path to the file or folder, including the drive letter and all folders in the path. Replace "C:/Users/YourUserName/Documents/MyFolder" with the actual path you wish to link to.
  • Relative Paths: The file:// protocol typically does not support relative paths reliably, so always use absolute paths for predictability.
  • User Permissions: Access to local files and folders will still depend on the user's file system permissions.
  • No guaranteed file explorer window: While this approach might open a new file explorer window in some cases, the behavior is not consistent across browsers and operating systems. It might simply open the file or navigate to the folder within the browser's file handling capabilities.
  • Browser variations: The way the file explorer will be opened will depend greatly on which browser you are using.
Attribute Description
<a href=""> This tag defines a hyperlink and tells the browser that the user will be navigated to the location specified in href attribute when clicked.
file:// Specifies that a file on the computer will be accessed via the browser.

Practical Example

Suppose you want to create a link to your document folder on a Windows machine. The following HTML code will help you achieve this:

<!DOCTYPE html>
<html>
<head>
    <title>Open Folder</title>
</head>
<body>
    <p>Click the link to open the folder:</p>
    <a href="file:///C:/Users/YourUserName/Documents/">Open Your Documents</a>
</body>
</html>

Remember to replace "C:/Users/YourUserName/Documents/" with the correct path of the directory that you want to open.

This will attempt to navigate the browser to the documents folder on your system, which will often cause the file explorer to open the specified folder or the system's default application to handle the file.

Related Articles