How to read a local text file using JavaScript?

Last Updated : 09 Jan, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

Reading a local text file involves accessing the contents of a file stored on a user's device. Using JavaScript, this can be achieved with the HTML5 File API and the FileReader object, which reads files selected through an <input> element or drag-and-drop, asynchronously.

Getting Started with the File API

To start reading a file, the user first needs to select it. This can be achieved using a simple file input: 

<input type="file" id="fileInput">

Once a file is selected, you can use JavaScript to access the file and read its contents.

There are four inbuilt methods in the FileReader API to read local files which are as follows:

Table of Content

1. FileReader.readAsArrayBuffer() Method

The FileReader.readAsArrayBuffer() method is used to read the contents of a file as an ArrayBuffer object, which represents raw binary data. Here's an example demonstrating how to use readAsArrayBuffer() to read a local file selected by the user

Example: To demonstrate using the FileReader.readAsArrayBuffer() method to read the local file.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Read File as ArrayBuffer</title>
</head>

<body>
	<input type="file" id="fileInput">
	<div id="fileContents"></div>

	<script>
		document
			.getElementById('fileInput')
			.addEventListener('change', function (event) {
				let file = event.target.files[0];
				let reader = new FileReader();

				reader.onload = function (event) {
					let arrayBuffer = event.target.result;
					let array = new Uint8Array(arrayBuffer);

					// Display some information about the file
					let fileSize = arrayBuffer.byteLength;
					let bytes = [];
					for (let i = 0; i < Math.min(20, fileSize); i++) {
						bytes.push(array[i]);
					}

					document
						.getElementById('fileContents')
						.textContent =
						'First 20 bytes of file as ArrayBuffer: '
						+ bytes.join(', ');
					console.log('ArrayBuffer:', arrayBuffer);
				};

				reader.readAsArrayBuffer(file);
			});
	</script>
</body>

</html>

Output:

read
Output


2. FileReader.readAsText()

Reads the contents of the specified input file. The result attribute contains the contents of the file as a text string. This method can take the encoding version as the second argument(if required). The default encoding is UTF-8.

Example : To demonstrate using the FileReader.readAsText() method to read the local file.

HTML 
<!DOCTYPE html>
<html>

<head>
	<title>Read Text File</title>
</head>

<body>
	<input type="file" name="inputfile" id="inputfile">
	<br>

	<pre id="output"></pre>

	<script type="text/javascript">
		document.getElementById('inputfile')
			.addEventListener('change', function () {

				let fr = new FileReader();
				fr.onload = function () {
					document.getElementById('output')
						.textContent = fr.result;
				}

				fr.readAsText(this.files[0]);
			})
	</script>
</body>

</html>

Output:

f1
Output

3. FileReader.readAsDataURL()

The FileReader.readAsDataURL() method is used to read the contents of a file and return them as a data URL representing the file's data. Here's an example demonstrating how to use readAsDataURL() to read a local file selected by the user and display it as an image:

Example: To demonstrate using the FileReader.readAsDataURL() method to read the local file.

HTML 
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>Read File as Data URL</title>
</head>

<body>
	<input type="file" id="fileInput">
	<div>
		<h2>Selected Image:</h2>
		<img id="imageDisplay" 
		     src="#" alt="Selected Image" 
			 style="max-width: 100%;">
	</div>

	<script>
		document
			.getElementById('fileInput')
			.addEventListener('change', function (event) {
				let file = event.target.files[0];
				let reader = new FileReader();

				reader.onload = function (event) {
					let dataURL = event
						.target
						.result;
					document
						.getElementById('imageDisplay')
						.src = dataURL;
					console.log('Data URL:', dataURL);
				};

				reader.readAsDataURL(file);
			});
	</script>
</body>

</html>

Output:

f3
Output

4. FileReader.readAsBinaryString()

The FileReader.readAsBinaryString() method reads the contents of a file as a raw binary string. This approach is useful when you need to handle binary data directly, such as for processing images, files, or other non-text data formats in JavaScript.

Example: To demonstrate using the FileReader.readAsBinaryString()method to read the local file.

HTML 
<!DOCTYPE html>
<html>

<head>
    <title>Read Text File</title>
</head>

<body>
    <input type="file" name="inputfile" id="inputfile">
    <br>

    <pre id="output"></pre>

    <script type="text/javascript">
        document.getElementById('inputfile')
            .addEventListener('change', function () {

                let fr = new FileReader();
                fr.onload = function () {
                    document.getElementById('output')
                        .textContent = fr.result;
                }

                fr.readAsBinaryString(this.files[0]);
            })
    </script>
</body>

</html>

Output:

f2
Output

Browser Compatibility

While the File API is widely supported in modern browsers, it’s always good to check compatibility, especially if your client uses older browsers.


Next Article
How to read a local text file using JavaScript?

S
Shreyasi_Chakraborty
Improve
Article Tags :

Similar Reads