< Return to all blogs
Reading a Text File Using HTML and Javascript
Uploading a text file and parsing it into a string in a web app
I just started working on a project that will analyze the user’s text and look for patterns, word usage, etc. My first hurdle was creating a system in which the user can upload a text file and have the server read it as a string.
After a lot of piecing together research online, I think I’ve found the answer.
Start with a simple HTML form input. This form will accept a tag and, when submitted, will run the function “loadFile.” I am using ReactJS so I had to bind the function to the parent.
<form onSubmit={this.loadFile.bind(this)}>
Select text file: <input type="file" id="selectedFile" name="text" accept=".txt" />
<input type="submit" />
</form>
React requires closing slashes on the inputs because it only recognizes “complete” tags.
Now here’s where the fun happens:
loadFile: function() {
console.log("Loading file"); //Feedback
var selectedFile = document.getElementById('selectedFile').files[0]; //Identifying the selected file using the id of the form tag
console.log(selectedFile); //Feedback to make sure the file is loaded correctly
var reader = new FileReader(); //Create a document reader (built into HTML5)
reader.onload = function(e) { //Declare the asyncronous callback for when a file is loaded into the reader
var text = reader.result; //The contents of the text file
console.log(text); //Spits back the contents of the text file
}
reader.readAsText(selectedFile); //Calls the reader to read our selected text file
//The reader goes to its "onload" function and executes that code
return false; //Prevents the page from auto-refreshing
}
That’s it! It was so satisfying once it worked. Hope this helps!
Main Sources: https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsText http://blog.teamtreehouse.com/reading-files-using-the-html5-filereader-api http://www.htmlgoodies.com/beyond/javascript/read-text-files-using-the-javascript-filereader.html#fbid=imWj_l2wfU6 http://www.w3schools.com/tags/att_input_type.asp
Posted in Web Development with HTML, Javascript