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

Question

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?

Depends. Browser-JavaScript: Real file-system: No. Virtual filesystem: Yes. — Rob W
– Rob W, Commented Jul 4, 2012 at 15:36
Virtual filesystem is, as I understand it, just another way of using localStorage; it's not possible to use it to do ls something, I suppose. ) — raina77ow
– raina77ow, Commented Jul 4, 2012 at 15:40
I know this is not what you're looking for, but you can create a server-side script and make it read a directory then send the results as JSON. — Abdulaziz
– Abdulaziz, Commented Jul 4, 2012 at 15:40
... if the poster wants to get contents of his directory, not a client's one. ) — raina77ow
– raina77ow, Commented Jul 4, 2012 at 15:41

Widor · Accepted Answer · 2022-02-23 12:12:18Z

5

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.

edited Feb 23, 2022 at 12:12

answered Jul 4, 2012 at 15:37

Widor

13.3k7 gold badges47 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Anderson Green Over a year ago

Flash and ActiveX are no longer supported in most browsers, but it is still possible to read files from directories in browsers that support the File System Access API.

gignu Over a year ago

I managed to make it work with this library: browser-fs-access

raina77ow · Accepted Answer · 2022-05-31 07:13:39Z

4

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).

edited May 31, 2022 at 7:13

answered Jul 4, 2012 at 15:37

raina77ow

107k16 gold badges205 silver badges240 bronze badges

3 Comments

gignu Over a year ago

It's not possible? I disagree! Take a look at this library, it does exactly what the OP was asking for: browser-fs-access

raina77ow Over a year ago

This library is a wrapper around (relatively new) API implemented in 2020, and this answer was written in 2012. :) But you're right; updated my answer mentioning this new API.

gignu Over a year ago

Cool, thx for updating it!!

antyrat · Accepted Answer · 2012-07-04 15:39:12Z

2

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

answered Jul 4, 2012 at 15:39

antyrat

27.7k9 gold badges78 silver badges77 bronze badges

Comments

Esailija · Accepted Answer · 2012-07-04 15:39:56Z

1

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.

answered Jul 4, 2012 at 15:39

Esailija

140k24 gold badges280 silver badges328 bronze badges

Comments

George Katsanos · Accepted Answer · 2012-07-04 15:40:44Z

0

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/

answered Jul 4, 2012 at 15:40

George Katsanos

14.3k18 gold badges71 silver badges114 bronze badges

Comments

Bashar Altakrouri · Accepted Answer · 2012-07-04 15:43:13Z

0

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.

answered Jul 4, 2012 at 15:43

Bashar Altakrouri

10.7k1 gold badge42 silver badges56 bronze badges

Collectives™ on Stack Overflow

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

6 Answers 6

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

2 Comments

3 Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related