Load text from local .txt file into html textarea using JavaScript

Question

I have a <textarea> element and a button that calls a loadFile() JavaScript function. I want this function to allow me to load the text from a .txt file on my local machine into the textarea. Any help with this would be greatly appreciated!

Answer 1

You can use the File and FileReader objects to read local files.

You can use an input element with type="file" to allow the user to select a file.

<input id="myFile" type="file"/>
<textarea id="myTextArea" rows="4" columns="20"></textArea>

After the user has selected a file, you can get the File object from the input element. For example...

var file = document.getElementById("myFile").files[0];

You can then use a FileReader object to read the file into the text area. For example...

var reader = new FileReader();
reader.onload = function (e) {
    var textArea = document.getElementById("myTextArea");
    textArea.value = e.target.result;
};
reader.readAsText(file);

Answer 2

I found a old topic about this: How do I load the contents of a text file into a javascript variable?

Have you read the last answer already? This works with a div instead of a textbox, but you could adapt the code a bit.

In the last piece of the last commenters post you could change this line:

document.getElementById("id01").innerHTML = out;

to:

document.getElementById("textbox01").innerHTML = out;

And in your HTML:

<textarea name="textbox01">Enter text here...</textarea>

Result:

function loadFile() {
    var xmlhttp = new XMLHttpRequest();
    var url = "file.txt";

    xmlhttp.onreadystatechange = function() {

        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var myArr = JSON.parse(xmlhttp.responseText);
            myFunction(myArr);

            console.log("xmlhttp Request Asepted");
        }


    }

        xmlhttp.open("GET", url, true);
        xmlhttp.send();


        function myFunction(arr) {
            var out = "";
            var i;
            var row = 0;

        for(i = 0; i < arr.length; i++) {
           // console.log( arr[1].data); change data to what every you have in  your file
           // out +=  arr[i].data + '<br>' + arr[i].data2 ;
            document.getElementById("textbox01").innerHTML = out;

        }

    }
}