CODEWITHSUNDEEP
javascripthtml
aF.
aF.

Reputation: 66697

Is it possible to read files from a directory using javascript?

I want to read a directory and fill a list with the name of those files.

Is it possible to do this tasks using javascript?

Upvotes: 4

Views: 26945

Answers (6)

raina77ow
raina77ow

Reputation: 106385

It's 2022, a lot of changes in the world and beyond, and, lo and behold, now we have something called File System Access API:

This API allows interaction with files on a user's local device, or on a user-accessible network file system. Core functionality of this API includes reading files, writing or saving files, and access to directory structure.

It became available in Chrome 86 (released in October 2020). Safari added support in 15.2 version, released in the end of 2021. To the moment of writing this, Firefox doesn't support this feature though (here's the related discussion).

Also, security considerations didn't go anywhere:

This API opens up potential functionality the web has been lacking. Still, security has been of utmost concern when designing the API, and access to file/directory data is disallowed unless the user specifically permits it.

This part is no longer relevant (kudos to @gignu for mentioning that in the comments) and is left here for historical reasons.

I suppose the closest you might get by using webkitdirectory attribute:

HTML

<input type="file" id="file_input" webkitdirectory="" directory="" />
<div id="list_of_files"></div>
...

JS

var $list = $('#list_of_files');
$('#file_input').change(function(event) {
  var listOfFiles = event.target.files;
  for (var i = 0, l = listOfFiles.length; i < l; ++i) {
     $list.append($('<p>'+ listOfFiles[i].name +'</p>'));
  }
});

... as shown here. But it works in Chrome only (and suggested usage of mozdirectory attribute didn't help).

Upvotes: 4

Widor
Widor

Reputation: 13275

No, for security reasons.

You might be able to do it by invoking ActiveX or Flash and having the user agree to permit file system access from these plugins, but - please don't.

Edit 10 years on: Not only please don't do this, but now outside of using an old device without updates - you can't do this with Flash/ActiveX.

Upvotes: 5

Bashar Altakrouri
Bashar Altakrouri

Reputation: 10595

Yes depending on the browser you have.

Even though it is not a common practice but you can using certain browsers such as Chrome (using the requestFileSystem supported by webkitRequestFileSystem) or in Internet Explorer using File System Object.

Upvotes: 0

George Katsanos
George Katsanos

Reputation: 14165

I don't know if you're doing security research etc etc.. So besides from saying "you shouldn't do it", the actual answer to the question is, you can actually READ files by taking advantage poorly-written JS code, that's why you should code.. defensively.

Then there's this: http://www.html5rocks.com/en/tutorials/file/dndfiles/

Upvotes: 0

Esailija
Esailija

Reputation: 140220

In google chrome you may prompt the client to select a directory and then use this to list the files contained in the directory and its subdirectories:

<input type="file" webkitdirectory onchange="listContents(this.files)">

listContents would be your implementation.

Upvotes: 1

antyrat
antyrat

Reputation: 27765

You can try to use FileReader object, but it poorly supported by browsers.

Upvotes: 2

Related Questions