Html Codes: Drag and Drop- Drag a Single or Multiple Files and Preview them by Dropping

May be one of the most important Drag and Drop feature of HTML5 is about files. It breaks the traditional way to send files to the web pages and make it easy just by dragging and dropping of them.
This code prepare a box and you can drop a single or multiple files on it. After that you can see a preview of the files content. The text files are printed and the images are shown when their
files are dropped. Test it below!

<!-- This Script is from www.html5freecode.com, Coded by: Kerixa Inc-->

<head>
<script>
function allowdrag(e) {
	e.stopPropagation()
	e.preventDefault()
}
function addobj(e) {
	e.stopPropagation()
	e.preventDefault()
	var files = e.dataTransfer.files;
	document.getElementById ("pr").innerHTML= "<span style='font-size: x-large'><strong>Preview:</strong></span><strong><br style='font-size: x-large'>"
	for (var i = 0; i<files.length ; i++) {
		ParseFile(files[i])
	}
	dragColor('lightgreen')
}
function ParseFile(file) {
	document.getElementById ("pr").innerHTML = document.getElementById ("pr").innerHTML+
		"<p>File information: <strong>" + file.name +
		"</strong> type: <strong>" + file.type +
		"</strong> size: <strong>" + file.size +
		"</strong> bytes</p>"
	
	if (file.type.indexOf("text") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
		document.getElementById ("pr").innerHTML = document.getElementById ("pr").innerHTML+ 
					"<p><strong>" + file.name + ":</strong></p><pre>" +
					e.target.result.replace(/</g, "&lt;").replace(/>/g, "&gt;") +
					"</pre>"
		}
		reader.readAsText(file)
	}
	if (file.type.indexOf("image") == 0) {
		var reader = new FileReader();
		reader.onload = function(e) {
		document.getElementById ("pr").innerHTML = document.getElementById ("pr").innerHTML+
					"<p><strong>" + file.name + ":</strong><br />" +
					'<img src="' + e.target.result + '" /></p>'
		}
		reader.readAsDataURL(file)
	}

}

function dragColor(clr){
	document.getElementById('drop').style.backgroundColor= clr}

</script>
</head>

<div style="border: medium dashed blue; height: 144px; padding: 1px 4px; width: 228px; text-align: center; color: maroon; font-size: 18pt"
id="drop" ondragover="allowdrag(event)" ondrop="addobj(event)" ondragenter="dragColor('lightyellow')" ondragleave="dragColor('white')"
><br>Drag and Drop<br>
	<br>any File Here</div>
<br><div id="pr">
<span style="font-size: x-large"><strong>Preview:</strong></span><strong><br style="font-size: x-large">
	</strong></div>

<div style="text-align: center"><br><font face="Tahoma"><a target="_blank" href="http://www.html5freecode.com"><span style="font-size: 8pt; text-decoration: none">HTML5 Free Code</span></a></font></div>

If you don't know how to use this code or need more information Click here!


	You can leave comments once you sign in/up.

HTML5 Best Codes

Html Codes: Drag and Drop- Drag a Single or Multiple Files and Preview them by Dropping

You can leave comments once you sign in/up.

Review

Links