froehoel
11/3/2014 - 10:46 PM

file upload via dragndrop

file upload via dragndrop

dragndrop.html
content_copyfile_download
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>File upload with drag and drop progress bar</title>
<style>
.dropzone {
	width: 300px;
	height: 300px;
	border: 2px dashed #ccc;
	color: #ccc;
	line-height: 300px;
	text-align: center;
}
.dropzone.dragover {
	border-color: black;
	color: black;	
}
</style>
</head>

<body>
<h2>Html5 file upload progress bar and drag and drop</h2>
<div id="uploads"></div>
<form id="upload_form" enctype="multipart/form-data" method="post">
	<input type="file" name="uploaded" id="uploaded"><br>
	<input type="button" value="Upload file" id="upload_btn">
	<div class="dropzone" id="dropzone">Drop files here to upload</div>
	<progress id="progressbar" value="0" max="100" style="width: 300px"></progress>
	<h3 id="status"></h3>
	<p id="loaded"></p>
</form>
<script>
(function(){
	var uploaded 	= document.getElementById('uploaded'),
		dropzone	= document.getElementById('dropzone'),
		btn 		= document.getElementById('upload_btn'),
		progressBar = document.getElementById('progressbar'),
		status		= document.getElementById('status'),
		loaded		= document.getElementById('loaded'),
		uploads 	= document.getElementById('uploads');

	btn.addEventListener('click',uploadHandler, false);
	dropzone.addEventListener('dragenter',dragoverHandler, false);
	dropzone.addEventListener('dragleave',dragleaveHandler, false);
	dropzone.addEventListener('drop', dropHandler, false);
	window.addEventListener('dragover', function(e){
		e.preventDefault();
	});

	function dropHandler(e){
		e.preventDefault();

		//console.log(e);
		//console.log(e.dataTransfer);
		//console.log(e.dataTransfer.files);
		
		
		this.classList.remove('dragover');

		var files = e.dataTransfer.files,
			formData = new FormData(),
			xhr = new XMLHttpRequest(),
			numberOfFiles = files.length;
			
		for(var i = 0; i < numberOfFiles; i++) {
			formData.append('uploads[]', files[i]);
		}
		
		xhr.onload = function(){
			var data = JSON.parse(this.responseText);
			displayUploads(data);			
		}
		
		xhr.open('post', 'file_uploaded_parser.php');
		xhr.send(formData);
	}

	function dragoverHandler(){
		this.classList.add('dragover');
		//this.className = 'dropzone dragover';
		return false;
	}

	function dragleaveHandler(){
		this.classList.remove('dragover');
		return false;
	}

	function displayUploads(data){
		var message,
			numberOfElements = data.length;
		
		for(var i = 0; i < numberOfElements; i++) {
			message = document.createElement('a');
			message.href = data[i].file;
			message.innerHTML = data[i].name;
			uploads.appendChild(message);
		}

	}

	function uploadHandler(e){
		var formdata = new FormData();
		formdata.append('uploaded', uploaded.files[0]);

		var xhr = new XMLHttpRequest();
		xhr.upload.addEventListener('progress', progressHandler, false);
		xhr.addEventListener('load', completeHandler, false);
		xhr.addEventListener('error', errorHandler, false);
		xhr.addEventListener('abort', abortHandler, false);
		xhr.open('POST', 'file_upload_parser.php');
		xhr.send(formdata);
	}

	function progressHandler(event){
		var percent = event.loaded/event.total*100;
		loaded.innerHTML = 'Uploaded ' + event.loaded + ' bytes of ' + event.total;
		progressbar.value = Math.round(percent);
		status.innerHTML = Math.round(percent) + '% uploaded...please wait';
	}

	function completeHandler(event){
		status.innerHTML = event.target.responseText;
		progressbar.value = 0;
	}

	function errorHandler(){
		status.innerHTML = 'Upload failed';
	}

	function abortHandler(){
		status.innerHTML = 'Upload aborted';
	}


})();
</script>
</body>
</html>