Read Local Files with Javascript

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">

</head>

<body>

<div id="demo-container">
	<label for="input-file" id="input-file-label">Choose Text File</label>
	<input type="file" id="input-file" accept="text/plain" />
	<div id="file-progress-container"><span id="file-progress-percent"></span>% read</div>
	<div id="contents"></div>
</div>

<script type="text/javascript">

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

	// first file selected by user
	var file = allFiles[0];

	// files types allowed
	var allowed_types = [ 'text/plain' ];
	if(allowed_types.indexOf(file.type) == -1) {
		alert('Error : Incorrect file type');
		return;
	}

	// Max 2 MB allowed
	var max_size_allowed = 2*1024*1024
	if(file.size > max_size_allowed) {
		alert('Error : Exceeded size 2MB');
		return;
	}

	// file validation is successfull, read the file
	var reader = new FileReader();

	// file reading started
	reader.addEventListener('loadstart', function() {
	    document.querySelector("#input-file-label").style.display = 'none'; 
	});

	// file reading finished successfully
	reader.addEventListener('load', function(e) {
	    var text = e.target.result;

	    // contents of the file
	    document.querySelector("#contents").innerHTML = text;
	    document.querySelector("#contents").style.display = 'block';

	    document.querySelector("#input-file-label").style.display = 'block'; 
	});

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

	// file read progress 
	reader.addEventListener('progress', function(e) {
	    if(e.lengthComputable == true) {
	    	document.querySelector("#file-progress-percent").innerHTML = Math.floor((e.loaded/e.total)*100);
	    	document.querySelector("#file-progress-percent").style.display = 'block';
	    }
	});

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

</script>

</body>
</html>