0

I have a project where I visualise data from a file (say, a CSV). My visualiser is a .html bundle created with Webpack. Up until now, I include a placeholder for the data as a string in the bundle. If I want to change the data, I replace the placeholder in the bundle .html file with the new data I want it to show (via an external script).

Now I'd really love to change this for convenience. For example, I'd like to get a list of all the supported files that are in the same directory as the .html file and load their data, either in the background or when I click or them or whatever. (In the easiest use-case, there would just be 1 data file in the directory and the project would just load this data automagically at startup.)

I had a look at Handlebars.js and I think it might help with the injection of the data. However, it seems that there is no possibility to read from the directory I start the .html file from. I already tried fs and path but those don't work in the browser when I just want do double-click the .html file.

Is there a possibility for the browser to read files from the directory I open a .html file from? And if so, how can this be done in Javascript/Typescript?

dadadidudu
  • 306
  • 3
  • 5
  • No, it is currently impossible to read local files with JavaScript, even when the HTML file is also local. You may be able to load it as a script with JSONP. – mousetail Mar 05 '20 at 15:52
  • I had the exact same use case a year ago and while Chrome is not able to load the csv Firefox does not restrict file access while being on localhost only. Check out my super bad javascript in this repo: https://github.com/mamichels/easyDashboard – mamichels Mar 05 '20 at 16:04
  • Browsers do not support reading arbitrary files for security reasons, but you could allow users to drag-n-drop file, or even folder with multiple files using `FileReader` API. See [this MDN article](https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop) for details. – Dmitriy Mar 05 '20 at 16:33
  • @mamichels the link gives a 404 – dadadidudu Mar 05 '20 at 19:58
  • This answer describes a few more recent solutions, namely using the Blob API https://stackoverflow.com/a/59804354/7386637. It also mentions an even newer API called the File System Access API: https://web.dev/file-system-access/ – rpivovar Oct 26 '20 at 14:36

0 Answers0