How to File Upload Drag and Drop using HTML5 and JavaScript

In this article we have created drag and drop feature which is based on File DataTransfer object. DataTransfer object holds information about the user interaction, including what files (if any) the user dropped on the element to which the event is bound.

<style>
	#drop_zone
	{
		background-color: #eee;
		border: #999 5px dashed;
		width: 290px;
		height: 200px;
		padding: 8px;
		font-size: 18px;
	}
</style>
<script>
	function drag_drop(event)
	{
		event.preventDefault();
		console.log(event.dataTransfer.file[0]);
		console.log(event.dataTransfer.file[0].name);
		console.log(event.dataTransfer.file[0].size+" bytes");
	}
</script>

<h1>File Upload Drop Zone</h1>
<div id="drop_zone" ondrop="drag_drop(event)" ondragover="return false" >
</div>