How do I open a local text file and display the contents in my browser?

Question

I intend to have a link in my webpage which will open a local text file and display its contents. This is what I have tried so far:

<a href='#' onclick='readTextFile("file:///F:/folder1/abc.txt")' title='Summary'><h3>Summary</h3></a>

function readTextFile(file)
{
    var rawFile = new XMLHttpRequest();
    rawFile.open("GET", file, false);
    rawFile.onreadystatechange = function ()
    {
        if(rawFile.readyState === 4)
        {
            if(rawFile.status === 200 || rawFile.status == 0)
            {
                var allText = rawFile.responseText;
                alert(allText);
            }
        }
    }
    rawFile.send(null);
}

This is the error I am getting:

XMLHttpRequest cannot load file:///F:/folder1/abc.txt. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

My webpage is running locally on a local server.

Is it even possible to open and read local files?Seems like something browsers should probably not allow.

oooh, no ... just re-read the question ... you can't do that, oh god please let it never be doable in any browser! — Jaromanda X, Mar 07 '17 at 12:31
In most browsers, this is possible only for resources inside the folder where the page lives, or in a child folder. — Pekka, Mar 07 '17 at 12:31
you cant access system files check [here](http://stackoverflow.com/a/6509224) — Joyson Dsouza, Mar 07 '17 at 12:33
Is the same also true if I am accessing an html document instead of a text document? — karansabhani, Mar 07 '17 at 12:43

score 3 · Answer 1 · answered Mar 07 '17 at 13:08

For HTML5 compliant websites you can use the new APIs available with HTML5.

HTML5 FileReader interface can be used to asynchronously read a file through familiar JavaScript event handling. It provides the following functions:

readAsText
readAsBinaryString
readAsDataURL
readAsArrayBuffer

Please follow this treehouse blog (contains demo too) and also this for your reference.

blackmiaool · Answer 2 · 2017-03-08T01:30:59.903

2

new answer:

It is still possible.

Use chrome
Install tampermonkey extension
Check the checkbox to make it can access local files.
Add a script into it as below:

// ==UserScript==
// @name         read localfile
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  read localfile
// @author       blackmiaool
// @match        http://stackoverflow.com/*
// @match        https://stackoverflow.com/*
// @grant        GM_getResourceText
// @resource     b file://C:\Users\blackmiaool\the-path-of-the-file
// ==/UserScript==

(function() {
    'use strict';
    var a=GM_getResourceText("b");
    console.log("The file's content is ",a);
})();

Remember to correct the file path, and test it on this page.

old answer:

Sure it's possible. If your index.html file locates at "/some-path/index.html", just put your abc.txt at "/some-path/abc.txt". And change the "file:///F:/folder1/abc.txt" to "./abc.txt".

edited Mar 08 '17 at 01:30

answered Mar 07 '17 at 12:32

blackmiaool

5,234
2
22
39

see where he says *webpage is running locally on a **local server*** – Jaromanda X Mar 07 '17 at 12:33
@JaromandaX I think the local server means the server runs on his own pc. – blackmiaool Mar 07 '17 at 12:35
I think local server means local server – Jaromanda X Mar 07 '17 at 12:38
Sorry, should have made that clearer, by local server I mean a locally hosted server, as in localhost. In this case it will be fine if the resource I am trying to access is on the server – karansabhani Mar 07 '17 at 12:40
How about multiple files with dynamic paths?! – Nabi K.A.Z. Aug 02 '19 at 23:14
@NabiK.A.Z. I don't know how to achieve it with pure browser. Try to write your own nodejs server to achieve it. – blackmiaool Aug 04 '19 at 08:44

score 0 · Answer 3 · answered Mar 07 '17 at 12:36

0

Simply "NO, You can't read any files from the server deployed locally on your machine." In order to access any resource, one must have the resource available on your sever. Where your current page is being served from.

answered Mar 07 '17 at 12:36

Nitesh Goyal

586
5
11

score 0 · Answer 4 · answered Mar 07 '17 at 13:05

The file need to be in your web application to link to it. Allowing javascript to access your machine outside the application is a security risk and is not allowed. A back end process can read the file then give you the results but you can not read directly from javascript to a file on your machine

How do I open a local text file and display the contents in my browser?

4 Answers4

Linked