How to load file content into textarea

All modern browsers support the FileReader JS object. It allows you to asynchronously read the contents of the file specified by the user in <input type="file">. Those. you can immediately read the contents of the file, bypassing its upload to the server.

To load the contents of a file into <textarea>, you need a form:

<form method="post">
	<textarea id="js-textarea"></textarea>
	<input type="file" id="js-file" accept=".txt,.css,.html">
</form>
HTML

And JQuery handler for clicking on file select button:

$("#js-file").change(function(){
	var reader = new FileReader();
	reader.onload = function(e){
		$("#js-textarea").val(e.target.result);
	};
	reader.readAsText($("#js-file")[0].files[0], "UTF-8");
});
JS

Result:

FileReader support in browsers

Data on support for the filereader feature across the major browsers from caniuse.com

16.10.2020, updated 14.05.2021
88

Comments

to add a comment.

Other publications

CSS styles for horizontal lines
Collection of horizontal lines with hr tag of different types and styles.
62
0
Vertical alignment of text in a block
A way to vertically align text in blocks of fixed height. The text is wrapped in a tag with a .child class, followed by...
32
0
Heading with a horizontal line in the middle
One way to make a heading with a horizontal line in the center without an image (background-image).
53
0
The viewport meta tag
Initially, the viewport meta tag appeared in the mobile version of Safari, then it was picked up by other developers and mobile browsers, although it is not part of the W3C standard.
34
0
Styling Checkbox
Here are some examples of how to change the look of checkboxes using CSS, images and some JS.
174
0
Smooth background change
This effect can be easily done through the CSS transition property for example buttons, menus, etc.
148
0