Easiest way to load and read a local text file with javascript?

Question

I have a .csv file that I wish to load that contains information that the .HTML page will format itself with. I'm not sure how to do this however,

Here's a simple image of the files: https://i.stack.imgur.com/ewjT9.png

I have looked into HTML5's FileReader and it seems like it will get the job done but it seems to require usage of input forms. I just want to load the file and be able to access the text inside and manipulate it as I see fit.

This post mentions AJAX, however the thing is that this webpage will only ever be deployed locally, so it's a bit iffy.

How is this usually done?

After a bit of further research it seems that there's no reliable cross-browser way to read a local file without user input. You'll need a form at the very least. However, you could store the file in localStorage once you've read it, and only prompt for it if the localStorage doesn't have it. That would reduce the prompting to a one-time event. — , Jul 21 '13 at 04:44
Surely there must be some way to read txt files unprompted? I understand there are some security issues from having websites access your computer's files, but is there no way to remove that limitation and give the website the all clear, just so I can access my database of information. — sloth, Jul 21 '13 at 05:04

score 1 · Answer 1 · answered Jul 21 '13 at 10:15

Since your web page and data file are in the same directory you can use AJAX to read the data file. However I note from the icons in your image that you are using Chrome. By default Chrome prevents just that feature and reports an access violation. To allow the data file to be read you must have invoked Chrome with a command line option --allow-file-access-from-files.

An alternative, which may work for you, is to use drag the file and drop into onto your web page. Refer to your preferred DOM reference for "drag and drop files".

score 0 · Answer 2 · answered Jul 21 '13 at 04:07

0

You can totally make an ajax request to a local file, and get its content back.

If you are using jQuery, take a look at the $.get() function that will return the content of your file in a variable. You just to pass the path of your file in parameter, as you would do for querying a "normal" URL.

answered Jul 21 '13 at 04:07

Antoine

2,785
1
16
23

I get the error message "Origin null is not allowed by Access-Control-Allow-Origin." when using AJAX. [The solution](http://stackoverflow.com/questions/8456538/origin-null-is-not-allowed-by-access-control-allow-origin) seems to be to actually host it on the web, but I'm doing this purely locally. – sloth Jul 21 '13 at 04:23
– sloth Jul 21 '13 at 04:34
2

@sloth, browser security doesn't allow files to access your local system. To test this you either need to install a test server and run it from that or run through a server online – Steven10172 Jul 21 '13 at 05:21

score 0 · Answer 3 · answered Jul 21 '13 at 06:09

You cannot make cross domain ajax requests for security purposes. That's the whole point of having apis. However you can make an api out of the $.get request URL.

The solution is to use YQL (Yahoo Query Language) which is a pretty nifty tool for making api calls out of virtually any website. So then you can easily read the contents of the file and use it.

You might want to look at the official documentation and the YQL Console

I also wrote a blog post specifially for using YQL for cross domain ajax requests. Hope it helps

score 0 · Answer 4 · edited May 23 '17 at 12:05

You can try AJAX (if you do not need asynchronous processing set "async" to false. This version below ran in any browser I tried when employed via a local web server (the address contains "localhost") and the text file was indeed in the UTF-8-format. If you want to start the page via the file system (the address starts with "file"), then Chrome (and likely Safari, too, but not Firefox) generates the "Origin null is not allowed by Access-Control-Allow-Origin."-error mentioned above. See the discussion here.

    $.ajax({
        async: false,
        type: "GET",
        url: "./testcsv.csv",
        dataType: "text",
           contentType: "application/x-www-form-urlencoded;charset=UTF-8",
        success: function (data) {
             //parse the file content here
           }
        });

The idea to use script-files which contain the settings as variables mentioned by Phrogz might be a viable option in your scenario, though. I was using files in the "Ini"-format to be changed by users.

Easiest way to load and read a local text file with javascript?

4 Answers4