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

Written by @m_k_amin 21 May 2013

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!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.html5freecode.com coded by: Kerixa Inc. -->
<!-- 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><a target='_blank' href='https://www.html5freecode.com' style='font-size: 8pt; text-decoration: none'>Html5 Free Codes</a>

Example:

About @m_k_amin

This user is pending a biography.

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300