fullscreen drop supporter

DropSupporter.css

body{
	margin: 0;
}
.droparea{
	all: initial;
	position: fixed;
	z-index: 1000;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	display: none;
}
.droparea.active{
	display: block;
	border: 8px dashed purple;
}

DropSupporter.js

!function(){
	var droparea = document.createElement("div")
	droparea.className = "droparea"
	
	function showDroparea(){
		droparea.classList.add("active")
	}
	
	function hideDroparea(){
		droparea.classList.remove("active")
	}
	
	droparea.ondragleave = eve => {
		eve.preventDefault()
		hideDroparea()
	}
	
	window.addEventListener("dragover", eve => eve.preventDefault(), false)
	window.addEventListener("dragenter", eve => {
		eve.preventDefault()
		showDroparea()
	}, false)
	window.addEventListener("drop", eve => {
		eve.preventDefault()
		hideDroparea()
	}, false)
	
	document.body.appendChild(droparea)
}()