Reading a String from a File in JavaScript

The code shown below reads the contents of a text file “Test.txt” into a string, and then displays that string in the web browser.

To see the code in action, paste it into an .html file and open that file in a web browser that runs JavaScript.  Or, for an online version, visit

UPDATE 2014/02/21 – Some of the commenters have had some trouble getting this to work. First, of course, you’ll need to actually have a test file named “Test.txt” in the same folder as the .html file. Less trivially, to get around browser security features, you may need to access the program through a web server, or else explicitly turn off the relevant security feature (for example, in Chrome, if running from “file://”, you might need to start the browser from the command line with the “–allow-file-access-from-files” switch).

UPDATE 2015/03/02 – Well, since the last update, Google Chrome has deprecated synchronous XMLHttpRequests, which makes my previous version of the code no longer work. Frankly, I’m kind of bitter about it–asynchronous calls are absolutely never what I need, and in my opinion they make a nasty disgusting hash of any code they’re used in. But obviously I must be in some sort of vanishingly small minority in that regard. So, what the heck, I’ve replaced my former code with one that uses an asynchronous call instead. I find myself wishing that modern web programming had a windpipe, so I could shove this down it. Oh, I also added a file picker control to it, so that the user can choose which file gets loaded, rather than it just loading a file named “Test.txt” every time. I guess that probably won’t help readability much either. Whatever, I’m going to go listen to music in my room real loud now.


<!-- user interface -->

<input id="inputFileToRead" type="file" onchange="inputFileToRead_Changed(this);"></input>

<script type="text/javascript">

// user interface events

function inputFileToRead_Changed(inputFileToRead)
	var pathOfFileToRead = inputFileToRead.files[0].name;

	new FileHelper().readStringFromFileAtPath

function inputFileToRead_Changed_2(contentsOfFileAsString)
	document.body.innerHTML = contentsOfFileAsString;

// classes

function FileHelper()
	FileHelper.prototype.readStringFromFileAtPath = function(pathOfFileToReadFrom, callback)
		var request = new XMLHttpRequest();
		request.onload = this.readStringFromFileAtPath_OnLoad.bind(this, callback);"GET", pathOfFileToReadFrom, true);

	FileHelper.prototype.readStringFromFileAtPath_OnLoad = function(callback, event)
		var request =;
		var returnValue = request.responseText;


This entry was posted in Uncategorized and tagged , , , , . Bookmark the permalink.

12 Responses to Reading a String from a File in JavaScript

  1. Yitbareck Zewde says:

    Does it work for any browsers?

  2. Mitsch says:

    It doesn’t work. bad

    • I just tested it on Windows 8 using Chrome, by:

      1. Copying the program into a text file named “Reader.html”.

      2. Creating a file named “Test.txt” in the same folder, containing the text “this is a test”.

      3. Opening the .html file in Chrome.

      I did have to start Chrome with the “–allow-file-access-from-files” command-line option. Sorry I didn’t mention that before. Presumably you wouldn’t need that command-line switch if you ran it through a web server, but I haven’t actually tested that, or at least not recently.

  3. prasad says:

    its not working in chrome

    • Well, I tested it in Chrome a couple of days ago. See my response to Mitsch in the comments above. Basically, you might either have to run Chrome with the “–allow-file-access-from-files” command-line switch (which it appears I misspelled in my response to Mitsch, sorry Mitsch), or maybe try putting the files on a web server.

  4. thementalist says:

    Can i give path of file to be online(not local)?

    • Online should be even easier than local. I’m not sure whether the file needs to be hosted on the same domain or not, though. There are some security implications here. Some topics you might look into “cross-site scripting” and “single-origin policy”. It might be easiest just to try out whatever you’d like to do and see if it works or not.

  5. Just-Ice says:

    why I can’t use document.getElementById(“demo”).innerHTML=contentsOfFileAsString; then I call it to html body? actually I want to made the text in center align and etc etc. How?

    • If I understand your question, it should be easy. You could do something like this:

      var divDemo = document.createElement(“div”); = “demo”;
      divDemo.innerHTML = contentsOfFileAsString;

      I’m not sure how you’d center it and so forth. I have to look up that CSS stuff every time.

  6. EL says:

    Is it working on Firefox?

  7. stormsf says:

    thanks a lot.

  8. Tom Rodgers says:

    Very helpful little snippet – thanks!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s