Need help reading a file in Javascript located in the same directory

Question

I've written this function to try and read a file located in the same directory as my Javascript files and index.html file. I've read from files before, but normally I have the user select the file themselves, so I've never had to create the actual file object.

Does anyone know why the code below doesn't work?

  function getFile()
  {
    var reader=new FileReader();
    var file=new File("input.txt");
    var str=reader.result;
    reader.readAsText(file);
    return str;
  }

Update:

Some additional information (My apologies if I don't answer your questions, I'm really new to this, and everything I know is self-taught).

Server side or client side? I think this it is going to be hosted serverside - I have a domain that I'm going to upload the file to.

well, if this javascript runs on clientside, so you cant do this as is. — rnrneverdies, Jun 06 '15 at 21:46
doubts: are there a server? or is intended to it runs from a drive? please include the context, in order that we can help you. — rnrneverdies, Jun 06 '15 at 22:07
Please clarify if you are trying to read a file on the client side or server side. See: [What is the difference between client-side and server-side programming?](http://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — Yogi, Jun 06 '15 at 22:28
with your updated information it is obvious that you have to get the file from a server. therefore you have to use an ajax-request. see my [answer](http://stackoverflow.com/a/30688140/3874924) — jhinzmann, Jun 07 '15 at 06:16

score 0 · Answer 1 · answered Jun 06 '15 at 21:57

0

Not possible due to security restrictions. You must use a file that was selected by a user. Imagine what would happen if javascript could read any file on your harddrive - nightmare!

answered Jun 06 '15 at 21:57

frontend_dev

1,693
14
28

score 0 · Answer 2 · answered Jun 06 '15 at 22:09

I had a similar code for a desktop app written in JS. It worked well on IE and FF until Chrome came along (yes, it was a very long time ago!) and started restricting the sandbox ever more. At some point, IE and FF also tightened permissions and the method didn't work anymore (I used this code which does not work anymore):

try {
  netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");

  file = Components.classes["@mozilla.org/file/local;1"].createInstance(Components.interfaces.nsILocalFile);
  file.initWithPath(filename);

  if (file.exists())
  {
    inStream = Components.classes["@mozilla.org/network/file-input-stream;1"].createInstance(Components.interfaces.nsIFileInputStream);
    inStream.init(file, 0x01, 00004, null);
    sInStream = Components.classes["@mozilla.org/scriptableinputstream;1"].createInstance(Components.interfaces.nsIScriptableInputStream);
    sInStream.init(inStream);
    content = sInStream.read(sInStream.available());
  }
} catch (ex) {
  // and so on...
}

At some point FF and Chrome had some startup flags that enabled the sandbox to be lax on certain security restrictions, but in the end I realized that this is simply old code.

Today, I use localStorage to store data on the local machine. The only disadvantage is that you have to implement an import/export functionality so that it is portable to other browsers/machines by copy/paste the raw text.

What I do is simply this. The maximum size of the database is said to be about 10 MB (but deviations are known to exist) and all I store is a single JSON string:

function store(data)
{
  localStorage.data = JSON.stringify(data);
}

function retrieve()
{
  return JSON.parse(localStorage.data);
}

Obviously, these two functions are an oversimplification, you need to handle edge cases like when no data exists or a non-JSON string was imported. But I hope you get the idea on how to store local data on modern browsers.

score 0 · Answer 3 · edited May 23 '17 at 11:58

With the File() constructor you can only create new file objects, but cannot read files from lokal disk.

It is not quite clear what exactly you want to achieve. You say, that the input.txt is located in the same directory as your html and js. Therefore it is located on the server.

If you want to read a file from the server you have to use an ajax request which is already explained in anoter question.

Need help reading a file in Javascript located in the same directory

3 Answers3