I'm currently facing a challenge with creating a full-page overlay that can detect drag and drop actions. My goal is to allow users to drag a file from their computer onto the page, triggering an upload when dropped anywhere on the page. However, I'm struggling to implement a full-page overlay that won't interfere with hover elements on the page when the file is dropped. Below is my current code setup:
HTML:
<div id='dropZone'></div>
CSS:
#dropZone
{
background: gray;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
opacity: .8;
}
Javascript for detecting the drop event:
var dropZone = document.getElementById('dropZone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);