bitnuts.de logo   Downloads About Contact

Drag and Drop file select in pure html with some javascript

drag and drop a file into a css customized file select boxIn many web applicatons you are able to drag and drop files into a file selection box like in the example image on the right. Such file selection boxes are often pretty designed having a drop zone which is highlighted on drag over. With pure html a <input type="file"> has no such drop zone, nor any highlighting. To do so you need some CSS and a bit of JavaScript.

There already exist solutions using jQuery and heavily bloated CSS frameworks, but I do not want to use such heavy weights if I just want to implement a prototyping application. So I decided to implement my own solutions which should work with most modern browsers like Firefox, Chrome, Opera and Internet Explorer. Internet Explorer made many problems here, because it is not possible to directly access the input file via DOM. You need to access the dropped file(s) by catching the drop event and obtain it from dataTransfer.files.

You can test my implementation in this demo. The source code is provided below. There is no need to include any JavaScript frameweork like jQuery or so. Please note, that it will only work on IE >= 10:

<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<style type="text/css">
.fileContainer {
overflow: hidden;
position: relative;
border: 2px dashed #dadada;
float: left;
padding: 2em;
}
.fileContainer [type=file] {
cursor: pointer;
display: inline-block;
font-size: 999px;
filter: alpha(opacity=0);
min-height: 100%;
min-width: 100%;
opacity: 0;
position: absolute;
right: 0;
top: 0;
}
.fileContainerFileName {
width: 360px;
border: 1px solid #a0a0a0;
display: inline-block;
padding: 0.5em;
border-right: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.fileContainerButton {
padding: 0.5em;
border: 1px solid #a0a0a0;
float: right;
display: inline-block;
}
.fileContainerDragOver {
background-color: gold;
border: 2px solid #808080;
}
</style>
</head>
<body>
<p>Select file to upload:</p>
<form method="post" action="#" enctype="multipart/form-data">
<label class="fileContainer" id="fileSelectBox" ondragover="dragOver(event)" ondragleave="leaveDrop(event)" ondrop="onDrop(event)">
<div class="fileContainerFileName" ondrop="onDrop(event)" id="fileName">Select File</div><span class="fileContainerButton">...</span>
<input name="fs" id="fs" onchange="fileContainerChangeFile(event)" type="file"/>
</label>
</div>
</form>
<script type="text/javascript">
	var droppedFiles = null;
	
	function fileContainerChangeFile(e) {
		document.getElementById('fileSelectBox').classList.remove( 'fileContainerDragOver' );
		try {
			droppedFiles = document.getElementById('fs').files;
			document.getElementById('fileName').textContent = droppedFiles[0].name;
		} catch (error) { ; }
		// you can also use the property from the fs field, but this won't work
		// with good old IE.
		try {
			aName = document.getElementById('fs').value;
			if (aName !== '') {
				document.getElementById('fileName').textContent = aName;
			}
		} catch (error) {
			;
		}
	}
	
	function onDrop(e) {
		document.getElementById('fileSelectBox').classList.remove( 'fileContainerDragOver' );
		try {
			droppedFiles = e.dataTransfer.files;
			document.getElementById('fileName').textContent = droppedFiles[0].name;
		} catch (error) { ; }
	}

	function dragOver(e) {
		document.getElementById('fileSelectBox').classList.add( 'fileContainerDragOver' );
		e.preventDefault();
		e.stopPropagation();
	}

	function leaveDrop(e) {
		document.getElementById('fileSelectBox').classList.remove( 'fileContainerDragOver' );
	}
</script>
</body></html>