Drag and Drop working with Jquery .on() but not with Vanilla JS

I am trying to convert my JQuery code to Vanilla JS solution:
It’s working with JQuery but has issues when I try to switch it with vanilla JS

Perfectly working code:

function readURL(input) {
  if (input.files && input.files[0]) {
    let reader = new FileReader();
    reader.onload = function (e) {
      let listIcon = e.target.result;
      document.getElementById("list-image").src = listIcon;
      document
        .querySelector(".image-upload-wrap")
        .classList.remove("image-dropping");
    };
    reader.readAsDataURL(input.files[0]);
  }
}

let dragTimer;
$(document).on("dragover", function (e) {
  let dt = e.originalEvent.dataTransfer;
  if (
    dt.types &&
    (dt.types.indexOf
      ? dt.types.indexOf("Files") != -1
      : dt.types.contains("Files"))
  ) {
    document
      .querySelector(".image-upload-wrap")
      .classList.add("image-dropping");
    window.clearTimeout(dragTimer);
  }
});
$(document).on("dragleave", function (e) {
  dragTimer = window.setTimeout(function () {
    document
      .querySelector(".image-upload-wrap")
      .classList.remove("image-dropping");
  }, 25);
});

The code that doesn’t work. I am using JS addEventListener and maybe that’s where the problem lies. I have added the working codepen at the end where it works (but uses JQuery)

let dragTimer;
document.addEventListener("dragstart", function (e) {
  ev.dataTransfer.setData("image", e.target.id);
});
document.addEventListener("dragover", function (e) {
  e.preventDefault();
  let dt = e.originalEvent.dataTransfer;
  if (
    dt.types &&
    (dt.types.indexOf
      ? dt.types.indexOf("Files") != -1
      : dt.types.contains("Files"))
  ) {
    document
      .querySelector(".image-upload-wrap")
      .classList.add("image-dropping");
    window.clearTimeout(dragTimer);
  }
});
document.addEventListener("dragleave", function (e) {
  e.preventDefault();
  dragTimer = window.setTimeout(function () {
    document
      .querySelector(".image-upload-wrap")
      .classList.remove("image-dropping");
  }, 25);
});

Working Codepen

>Solution :

The issue in your code lies in the usage of e.originalEvent in the dragover event listener. In Vanilla JS, the event object itself contains the necessary properties, so you don’t need to access originalEvent.

let dragTimer;
document.addEventListener("dragstart", function (e) {
  e.dataTransfer.setData("image", e.target.id);
});

document.addEventListener("dragover", function (e) {
  e.preventDefault();
  let dt = e.dataTransfer;
  if (
    dt.types &&
    (dt.types.indexOf
      ? dt.types.indexOf("Files") != -1
      : dt.types.contains("Files"))
  ) {
    document
      .querySelector(".image-upload-wrap")
      .classList.add("image-dropping");
    window.clearTimeout(dragTimer);
  }
});

document.addEventListener("dragleave", function (e) {
  e.preventDefault();
  dragTimer = window.setTimeout(function () {
    document
      .querySelector(".image-upload-wrap")
      .classList.remove("image-dropping");
  }, 25);
});

jQuery normalizes the event handling across different browsers, providing a consistent interface to work with events. When an event is triggered, jQuery wraps the original event object provided by the browser with its own event object. This jQuery event object contains additional properties and methods for cross-browser compatibility.

The originalEvent property allows you to access the underlying, browser-specific event object within the jQuery event object. It provides direct access to the original event’s properties and methods. This can be useful when you need to access browser-specific features or handle events in a non-standard way.