Uncaught TypeError: Cannot read properties of undefined (reading 'dataTransfer')

Question

I have this code for getting files dragged and dropped into an area:

//track drop
document.getElementById("track-drop").addEventListener("dragenter", function(e) {
  e.preventDefault();
  e.target.classList.add("drag-enter");

  console.log("Event: dragenter")
});

document.getElementById("track-drop").addEventListener("dragover", function(e) {
  e.preventDefault();

  console.log("Event: dragover")
});

document.getElementById("track-drop").addEventListener("dragleave", function(e) {
  e.preventDefault();
  e.target.classList.remove("drag-enter");

  console.log("Event: dragleave")
});

document.getElementById("track-drop").addEventListener("drop", function(e) {
  e.preventDefault();
  e.target.classList.remove("drag-enter");

  console.log("Event: drop")

  var dropEvent = e.originalEvent;

  for (var i = 0; i < dropEvent.dataTransfer.files.length; i++) {
    console.log("New file: ", dropEvent.dataTransfer.files[i]);
  }
});

.track-drop {
  border: 2px dashed blue;
  height: 100px;
  width: 200px;
  margin: 1em 0;
}

.track-drop::before {
  content: "Drop file(s) here!";
}

.track-drop.drag-enter {
  border: 2px solid orange;
}

<div class="track-drop" id="track-drop"></div>

The problem is an error is received:

Uncaught TypeError: Cannot read properties of undefined (reading 'dataTransfer')

At this JS statement: dropEvent.dataTransfer.files.length

Debugger

In my code, the debugger indicates e.originalEvent doesn't exist. But e.dataTransfer exists. I don't understand why.

Note

The same code works good at another web page. Surprisingly, e.originalEvent exists there. But e.dataTransfer doesn't.

Question

I don't understand why the code works for another web page and not mine. Did I miss a dependency or something?

Answer 1

I think your error will solve by reading dataTransfer from event directly like this:

for (var i = 0; i < e.dataTransfer.files.length; i++) {
  console.log("New file: ", e.dataTransfer.files[i]);
}