Click through a / Maintain hover (Drag & Drop Zone)

Question

I want the user to be able to drag and drop a file into the page and trigger an event. Right now i have an overlay which is on top of the page with z-index: 100 and it works to drop files onto it. My issue is that it is overlapping every other element on the page (including elements that cover the entire background), which means i cannot click anything below; text, buttons, play on a video, everything below cannot be interacted with.

I was thinking to have the clicking removed so it can be clicked through, but still keep the hovering event so files can be dropped on it. I have had no luck figure this out, looked at multiple other SO questions for answers but none have worked as i want it to. I'm looking for pure JS (or NodeJS, since that can be used in my case), CSS and HTML. Besides that I'm open to suggestions on how to get this done. Thanks in advance!

I tried doing it using window.ondrop, window.ondragover, etc. instead of an overlay but this seems to be disrupted by the other elements on the page.

I've also tried to add pointer-events: none; and user-select: none; in combo and alone.

Putting the overlay on a layer below all the elements makes it uninteractable for the same reason as the background elements becomes uninteractable when the overlay is on top.

JSFiddle: https://jsfiddle.net/apLuykz3/1/ I need the button below to be clickable, as well as any other element, but maintain the hover event when dragging files onto the window.

HTML

<div id="dropOverlay"></div>

CSS

div#dropOverlay{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  z-index: 100;
}

div#dropOverlay[show="true"]{
  background: rgba(0, 0, 0, 0.5);
}

JavaScript

// Drop events
  document.querySelector("#dropOverlay").ondrop = function (e) {
    // e.preventDefault();
    var files = e.dataTransfer.files;
    for (var i = 0; i < files.length; i++) {
      console.log(files[i]);
    }
    this.removeAttribute("show");
  }

  document.querySelector("#dropOverlay").ondragenter = function (e) {
    e.stopPropagation();
    e.preventDefault();
    this.setAttribute("show", "true");
  }

  document.querySelector("#dropOverlay").ondragleave = function (e) {
    e.stopPropagation();
    e.preventDefault();
    this.removeAttribute("show");
  }

  document.querySelector("#dropOverlay").ondragover = function (e) {
    e.preventDefault();
  }