Drop Zone Overlay

Overlay on Drag Enter

A semi-transparent overlay slides in when files are dragged over the target area, providing clear visual guidance for where to drop.

This area contains regular page content. Try dragging a file over it to see the upload overlay appear.

⬇

Release to upload

<div id="container" class="overlay-container">
  <div class="overlay-content">
    <p>Regular page content here</p>
    <div id="uploader"></div>
  </div>
  <div id="overlay" class="drop-overlay">
    Release to upload
  </div>
</div>

container.addEventListener('dragenter', function() {
  overlay.classList.add('active');
});
container.addEventListener('drop', function() {
  overlay.classList.remove('active');
});