Reading local file using JavaScript

Question

So i have a file locally called "index.html" which i access using the "file://" protocol. (So not the "http://" protocol). I need to access a file "data.txt" in the same directory which is continuously changed by a seperate program, but since i'm using the file protocol the access to the file is denied for security reasons.

What could i do to read the local file? I thought of running a local server using XAMPP or WAMP but i'd rather not use any extra programs.

EDIT: I cannot use an input file, since it should work without any user interaction.

Possible duplicate of [Reading local file in javascript](http://stackoverflow.com/questions/26199028/reading-local-file-in-javascript) — Dexygen, Sep 12 '16 at 10:39
Possible duplicate of [Local file access with javascript](http://stackoverflow.com/questions/371875/local-file-access-with-javascript) — Liam, Sep 12 '16 at 10:39
*since it should work without any user interaction* this would be a **gigantic security flaw**. If this was possible what would stop me writing a web site that when you visited it simply hovered up all your local files? — Liam, Sep 12 '16 at 10:44
@Liam It is still a security flaw but less gigantic than you think it is. The page i'm requesting the local file from is also local. So it would be the same as a C++ program that's reading local files. — Resantic, Sep 12 '16 at 10:47
Your missing my point. The browser where JavaScript is ran, serves web pages (local and remote). It can't differenticate between them. The fact that it is local is irrlevant to the browser, it simply doens't care. It will prevent all local file access because if it didn't anyone (local or remote) could hyjack your machine — Liam, Sep 12 '16 at 12:28

score 0 · Answer 1 · answered Sep 12 '16 at 10:40

You may do it via the File API - https://www.w3.org/TR/file-upload/

The example below filters out images from the user's selection, calls reader.readAsDataURL() on the file, and renders a thumbnail by setting the 'src' attribute to a data URL.

<style>
  .thumb {
    height: 75px;
    border: 1px solid #000;
    margin: 10px 5px 0 0;
  }
</style>

<input type="file" id="files" name="files[]" multiple />
<output id="list"></output>

<script>
  function handleFileSelect(evt) {
    var files = evt.target.files; // FileList object

    // Loop through the FileList and render image files as thumbnails.
    for (var i = 0, f; f = files[i]; i++) {

      // Only process image files.
      if (!f.type.match('image.*')) {
        continue;
      }

      var reader = new FileReader();

      // Closure to capture the file information.
      reader.onload = (function(theFile) {
        return function(e) {
          // Render thumbnail.
          var span = document.createElement('span');
          span.innerHTML = ['<img class="thumb" src="', e.target.result,
                            '" title="', escape(theFile.name), '"/>'].join('');
          document.getElementById('list').insertBefore(span, null);
        };
      })(f);

      // Read in the image file as a data URL.
      reader.readAsDataURL(f);
    }
  }

  document.getElementById('files').addEventListener('change', handleFileSelect, false);
</script>

[This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.](https://developer.mozilla.org/en-US/docs/Web/API/File_System_API) — Liam, Sep 12 '16 at 10:41

Reading local file using JavaScript

1 Answers1