Read file names in a local folder in an HTML page

Active3 hr before
Viewed126 times

7 Answers


To link to a target file in the same directory as the invoking HTML file, just use the filename, e.g. my-image.jpg.,To link to a target file in the directory above the invoking HTML file, write two dots. So for example, if index.html was inside a subfolder of test-site and my-image.jpg was inside test-site, you could reference my-image.jpg from index.html using ../my-image.jpg.,To reference a file in a subdirectory, write the directory name in front of the path, plus a forward slash, e.g. subdirectory/my-image.jpg.,Insert the file path into your HTML code between the double quote marks of the src="" code.

<!DOCTYPE html>

   <meta charset="utf-8">
   <title>My test page</title>

   <img src="" alt="My test image">


I am creating a HTML page where I need to display the names of the files present in the specific local folder, example - C:UsersUser1Documentsfolder1 . I tried to write the code in java script but have not succeeded yet. Most of the question threads mention about "ActiveXObject" to be used but that itself does not work for me.,Chrome can access the contents of a directory that is selected using a file input field. However, other browsers, such as Internet Explorer and Firefox, have not implemented this feature at this time, nor is there currently any way to access a directory that was not selected by the user.,Some file formats are considered insecure by the browser and the download fails. Saving JSON files with txt extension works for me.,A detailed explanation of what is going on can be found here. Basically this behavior by design for IE since IE6 SP1/SP2 and the only way you can change it is by explicitly disabling certain security policies using registry settings on the local machine.

Here is a simplified example (jsfiddle):

var saveData = (function() {
   var a = document.createElement("a");
   document.body.appendChild(a); = "display: none";
   return function(data, fileName) {
      var json = JSON.stringify(data),
         blob = new Blob([json], {
            type: "octet/stream"
         url = window.URL.createObjectURL(blob);
      a.href = url; = fileName;;

var data = {
      x: 42,
      s: "hello, world",
      d: new Date()
   fileName = "my-download.json";

saveData(data, fileName);
load more v

For client side files, you cannot get a list of files in a user's local directory. ,If the user has provided uploaded files, you can access them via their input element. ,For getting the list of filenames in a specified folder, you can use:,The current code will give a list of all files in a folder, assuming it's on the server side you want to list all files:

The current code will give a list of all files in a folder, assuming it's on the server side you want to list all files:

var fs = require('fs');
var files = fs.readdirSync('/assets/photos/');
load more v

const fs = require('fs')

const dir = '/Users/flavio/folder'
const files = fs.readdirSync(dir)

for (const file of files) {
load more v

FileList - an array-like sequence of File objects. (Think <input type="file" multiple> or dragging a directory of files from the desktop).,Note: Some browsers treat <input type="file"> elements as native drop targets. Try dragging files onto the input field in the previous example.,Try this example with a directory of images!,Another technique for loading files is native drag and drop from the desktop to the browser. We can modify the previous example slightly to include drag and drop support.

The first thing to do is check that your browser fully supports the File API:

// Check for the various File API support.
if (window.File && window.FileReader && window.FileList && window.Blob) {
   // Great success! All the File APIs are supported.
} else {
   alert('The File APIs are not fully supported in this browser.');
load more v

A filename or file name is a name used to uniquely identify a computer file in a directory structure. Different file systems impose different restrictions on filename lengths and the allowed characters within filenames. ,The components required to identify a file varies across operating systems, as does the syntax and format for a valid filename. ,File system permissions,check for canonical equivalence among filenames, to avoid two canonically equivalent filenames in the same directory.[1]

In addition, in Windows and DOS utilities, some words are also reserved and cannot be used as filenames.[17] For example, DOS device files:[19]

COM0, COM1, COM2, COM3, COM4, COM5, COM6, COM7, COM8, COM9[20]
LPT0, LPT1, LPT2, LPT3, LPT4, LPT5, LPT6, LPT7, LPT8, LPT9[20]
LST(only in 86 - DOS and DOS 1. xx)
KEYBD$, SCREEN$(only in multitasking MS - DOS 4.0)
$IDLE$(only in Concurrent DOS 386, Multiuser DOS and DR DOS 5.0 and higher)
CONFIG$(only in MS - DOS 7.0 - 8.0)
load more v

Resilience4j Configuration ,Whether to enable auto configuration of the file component. This is enabled by default.,See also section writing done files below.,The File endpoint is configured using URI syntax:

file: directoryName[ ? options]
load more v

Other "folder-local" queries related to "Read file names in a local folder in an HTML page"