0
173
ViewsTypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'dataTransfer')
Tengo este código para arrastrar y soltar archivos en un área:
//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>El problema es que se recibe un error:
TypeError no capturado: no se pueden leer las propiedades de undefined (leyendo 'dataTransfer')
En esta declaración JS: dropEvent.dataTransfer.files.length
depurador
En mi código, el depurador indica que e.originalEvent no existe. Pero e.dataTransfer existe. no entiendo porque
Nota
El mismo código funciona bien en otra página web. Sorprendentemente, e.originalEvent existe allí. Pero e.dataTransfer no.
Pregunta
No entiendo por qué el código funciona para otra página web y no para la mía. ¿Me perdí una dependencia o algo así?
·
Juan Pablo Isaza
1 answers
Answer question0
Creo que su error se resolverá leyendo la transferencia de datos del evento directamente de esta manera:
for (var i = 0; i < e.dataTransfer.files.length; i++) { console.log("New file: ", e.dataTransfer.files[i]); }
·
Juan Pablo Isaza
Report
Answer question