0
175
VisualizaçõesUncaught TypeError: Cannot read properties of undefined (reading 'dataTransfer')
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?
·
Juan Pablo Isaza
1 Respostas
Responde à pergunta0
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]);
}
·
Juan Pablo Isaza
Relatório
Responde à pergunta