javascript - Drag & Drop - DataTransfer object

I'm building a simple drag n' drop uploader and I'm wondering why I can't see the file(s) I drop when I console.log(e) (DragEvent) and look at the DragEvent.dataTransfer.files it shows up empty, but... if I console.log(e.dataTransfer.files) it will show the dropped file(s).

//CODE

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", init);
function init(){
    var dropbox = document.getElementById('dropbox');
    dropbox.addEventListener('dragover', drag.over);
    dropbox.addEventListener('drop', drag.drop);
}
var drag = {
    "over": function(e){
        e.preventDefault();
    },
    "drop": function(e){
        e.preventDefault();
        console.log(e); //NO FILES SHOWN
        console.log(e.dataTransfer.files); //FILES in FileList Object
    }   
};  
</script>
<style>
body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
}
#dropbox{
    height: 400px;
    width: 400px;
    align-self: center;
    background-color: #0089C4;
    border-radius: .3em;
    border: 1px dashed black;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
</style>
</head>
<body>
    <div id="dropbox"></div>    
</body> 
</html>

//CODE

<!DOCTYPE html>
<html>
<head>
<script>
document.addEventListener("DOMContentLoaded", init);
function init(){
    var dropbox = document.getElementById('dropbox');
    dropbox.addEventListener('dragover', drag.over);
    dropbox.addEventListener('drop', drag.drop);
}
var drag = {
    "over": function(e){
        e.preventDefault();
    },
    "drop": function(e){
        e.preventDefault();
        console.log(e); //NO FILES SHOWN
        console.log(e.dataTransfer.files); //FILES in FileList Object
    }   
};  
</script>
<style>
body{
    margin: 0 !important;
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
}
#dropbox{
    height: 400px;
    width: 400px;
    align-self: center;
    background-color: #0089C4;
    border-radius: .3em;
    border: 1px dashed black;
    -webkit-box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
    box-shadow: 0px 2px 7px rgba(0, 0, 0, 0.40);
}
</style>
</head>
<body>
    <div id="dropbox"></div>    
</body> 
</html>

Share Improve this question asked Oct 29, 2015 at 16:56 Jordan Davis 1,5207 gold badges24 silver badges42 bronze badges

At the time you click at object in console it may have passed through multiple functions changing its properties. So why would you expect it to be the same? If you need it later, you can freeze it, clone or copy value. – Buksy Commented May 23, 2016 at 13:25

Add a ment |

1 Answer 1

Sorted by: Reset to default 17 +50

The drag data store has different modes depending on when you access it:

On dragstart event it's on read/write mode.
On drop event, it's in read only mode.
And on all other events, it's in protected mode.

Protected mode is defined this way:

Protected mode

For all other events. The formats and kinds in the drag data store list of items representing dragged data can be enumerated, but the data itself is unavailable and no new data can be added.

See here: https://html.spec.whatwg/multipage/interaction.html#the-drag-data-store

That means that when you access the dataTransfer object in your console, which is not on drop or dragstart event, it's in protected mode, preventing you from accessing the data.

You can view the fileList because you log the fileList on drop event when dataTransfer is readable. But if you log e.dataTransfer or e, you won't be able to access any data.

You can test here, even on dragover you can't access what's in dataTransfer:

document.querySelector('#droppable').ondragover = function(e) {
  console.log('on dragover files are', e.dataTransfer.files)
  e.preventDefault();
}

document.querySelector('#droppable').ondrop = function(e) {
  console.log('on drop files are', e.dataTransfer.files)
  e.preventDefault();
}

<div id=droppable>Drop a file</div>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Drag & Drop - DataTransfer object - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)