JS – Drop and display a file to a html

Javascript has a powerful event and DOM objects, that enable anyone to do fancy things with it. Today I have thought of writing a todo list in *.txt file and adding it to a *.htm file with javaScript. Something like this:

And it reads nicely every line of your todo.txt file and even takes the name of the file as a header. The other interesting trick is that the two div-s are changing colors, based on the events in the JavaScript like this:

			event.target.classList.remove("file_present");
			document.getElementById("instructions").classList.remove("file_present");

If you know when to ask for adding css class and to remove it, the effect is really nice. Pretty much that is all. Here comes the code:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>VitoshAcademy</title>
		<style>
		.file_present{
			background-color: blue !important;
			color: yellow !important;
		}
		
		#block_container{
		}
		
		#fileplace {
			display:inline;
			color:blue;
			background-color: yellow;
			color:blue;
			width: 200px;
			height: 100px;
			border: 1px solid black;
			padding: 10px;
			margin:30px;
		}
		
		#instructions{
			display:inline;
			color:white;
			background-color:white;
			width: 200px;
			height: 100px;
			border: 0px solid black;
			padding: 10px;
			margin:30px;
		}
		
		</style>
		<script>
		var fileName;
		window.addEventListener("load", init);

		function init() {
			var readingPlace = document.getElementById('fileplace');
			readingPlace.addEventListener('dragover', my_dragover);
			readingPlace.addEventListener('dragenter', my_dragenter);
			readingPlace.addEventListener('dragleave', my_dragleave);
			readingPlace.addEventListener('drop', my_drop);
		}

		function my_dragover(event) {
			event.stopPropagation();
			event.preventDefault();
			event.dataTransfer.dropEffect = 'move';
		}

		function my_dragenter(event) {
			event.target.classList.add("file_present");
			document.getElementById("instructions").classList.add("file_present");
		}

		function my_dragleave(event) {
			event.target.classList.remove("file_present");
			document.getElementById("instructions").classList.remove("file_present");
		}

		function my_drop(event) {
			event.stopPropagation();
			event.preventDefault();

			if (event.dataTransfer.files[0]) {
				fileName = event.dataTransfer.files[0].name;
				fileName = fileName.split(".")[0];
				var my_reader = new FileReader();
				my_reader.addEventListener("load", readFile);
				my_reader.readAsText(event.dataTransfer.files[0], "UTF-8");
			}
		}

		function readFile(event) {
			document.getElementById("instructions").classList.remove("file_present");

			var body = document.getElementsByTagName("body")[0];
			var rows = event.target.result.split("\n");
			var title = document.createElement("h1");
			title.appendChild(document.createTextNode(fileName));
			body.appendChild(title);
			var my_list = document.createElement("ul");
			body.appendChild(my_list);

			for (var i = 0; i < rows.length; i++) {
				var li = document.createElement("li");
				li.appendChild(document.createTextNode(rows[i]));
				my_list.appendChild(li);
			}
		}

		</script>
	</head>
	<body>
		<h1>File to read</h1>
		<div id="block_container">
			<div id="fileplace">Drag file here</div>
			<div id="instructions">Now Release!</div>
		</div>
	</body>
</html>

Available also in GitHub! Enjoy it! 🙂

JS – Drop and display a file to a html

Related posts: