Read file with Javascript Fetch API without knowing the name of the file

Question

I have a directory of text files called ./text-files. I can read files using the fetch API like this:

fetch('./text-files/foo.txt')
  then(res => {
    return res.text()
  })
  .then(text => {
    console.log(text)
  })

Does the fetch API support some way to read a directory of files without knowing the specific name of the files only the file extension?

Ideally, I'd like some way to get a list of all files in the directory ./text-files and then read each one serially using fetch. Is this possible? If it's possible to read one file off disk in Javascript, I would think there'd be some way to get a list of file and read each of them?

I was trying to do something like this, which didn't work:

fetch('./text-files/*.txt')
  then(res => {
    return res.text()
  })
  .then(text => {
    console.log(text)
  })

Evans · Accepted Answer · 2018-06-21 21:33:01Z

2

This is not possible assuming that you are attempting to read all files from a remote server directory while only using fetch. You can make an API endpoint on remote machine that will return an array of files. That remote API endpoint can use Node's fs module and something along the lines of:

fs.readdir(path, function(err, items) {
console.log(items);

for (var i=0; i<items.length; i++) {
    console.log(items[i]);
}});

Then once you fetched an array of files you can then set up them to be individually be fetched using fetch api.

answered Jun 21, 2018 at 21:33

Evans

6515 silver badges13 bronze badges

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

5 Comments

turtle Over a year ago

Thanks. Files are all local. If I can read one file successfully (which I can). Why can't I read all of them in a directory?

Adam H Over a year ago

@turtle because you are sandboxed in the browser. You can request a specific file and if permissions allow it you will get that file. Listing the contents of a directory is an entirely different thing. You will not be able to do this on a local machine, the browser will not give you access to the information as it is a huge security hole. Just think, you wouldn't want some random site to be able to access the list of all the files on your C:\ drive now would ya

Barmar Over a year ago

@http fetch() uses the HTTP protocol, which doesn't have any directory listing operations.

turtle Over a year ago

@AdamH: Thanks. Yes, what you're saying makes sense I guess. I would think reading a file from disk even if you know its name is also a big security hole. Someone could even try guessing the names of important files. Thanks again for the help.

Adam H Over a year ago

Hey @turtle you are right but because the page you are loading is a local resource the browser is giving you special permissions, the second you pull that page via http(s):/ instead of file:/ it will block it

Collectives™ on Stack Overflow

Read file with Javascript Fetch API without knowing the name of the file

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related