How to Read a Local File Using Javascript in Browser (.txt .json etc)

Quick Sample Code

<input type="file" id="file-input" />
<button id="read-button">Read File</button>
<pre id="file-contents"></pre>

<script>
	document.querySelector("#read-button").addEventListener('click', function() {
		let file = document.querySelector("#file-input").files[0];
		let reader = new FileReader();
		reader.addEventListener('load', function(e) {
	    		let text = e.target.result;
	    		document.querySelector("#file-contents").textContent = text;
		});
		reader.readAsText(file);
	});
</script>

Demo — Reading a Local Text File

This example reads a text file from the local disk :

Download JS code for demo

How is File Reading Done ?

This tutorial will show how to read a file from the local filesystem by implementing the following steps :

• Allowing the user to choose file from the device through <input> file element.
• Reading metadata (name, type & size) of the file using properties of the selected File object.
• Reading contents of the file using FileReader object.

Step 1 — Allow User to Choose the File

<!-- allow user to select file -->
<input type="file" id="file-input" />

<!-- button to start reading the file -->
<button id="read-button">Read File</button>

<!-- file contents will be placed here -->
<pre id="file-contents"></pre>

Step 2 — Read File Metadata (Name, Type & Size) using Properties of File Object

The file selected by the user can be accessed as a File object in Javascript. The name, type & size properties of this File object gives the metadata of the chosen file.

document.querySelector("#read-button").addEventListener('click', function() {
	if(document.querySelector("#file-input").files.length == 0) {
		alert('Error : No file selected');
		return;
	}

	// file selected by user
	let file = document.querySelector("#file-input").files[0];

	// file name
	let file_name = file.name;

	// file MIME type
	let file_type = file.type;

	// file size in bytes
	let file_size = file.size;
});

Step 3 — Read File Contents using FileReader Object

The contents of the selected File object is read using the FileReader object. Reading is performed asynchronously, and both text and binary file formats can be read.

• Text files (TXT, CSV, JSON, HTML etc) can be read using the readAsText() method.
• Binary files (EXE, PNG, MP4 etc) can be read using the readAsArrayBuffer() method.
• Data url string can be read using the readAsDataURL() method.

document.querySelector("#read-button").addEventListener('click', function() {
	if(document.querySelector("#file-input").files.length == 0) {
		alert('Error : No file selected');
		return;
	}

	// file selected by user
	let file = document.querySelector("#file-input").files[0];

	// new FileReader object
	let reader = new FileReader();

	// event fired when file reading finished
	reader.addEventListener('load', function(e) {
	   // contents of the file
	    let text = e.target.result;

	    document.querySelector("#file-contents").textContent = text;
	});

	// event fired when file reading failed
	reader.addEventListener('error', function() {
	    alert('Error : Failed to read file');
	});

	// read file as text file
	reader.readAsText(file);
});

Other FAQs on Reading a File with Javascript

// file read progress event
reader.addEventListener('progress', function(e) {
	if(e.lengthComputable == true) {
		// percentage of the file read
		let percent_read = Math.floor((e.loaded/e.total)*100);
	    	console.log(percent_read + '% read');
	}
});