Edenwave Edenwave - 5 days ago 6
CSS Question

Drop file, files property can't read on undefined

I just have a problem with drop zone for my photos, dataTransfer doesn't work end return as undefault. Please help me and show where I made a mistake. Thank you.



jQuery(document).ready(function ($) {
$('#dropbox').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
e.preventDefault();
});

$('#dropbox').on('drop', function(e){
e.preventDefault();
var files = e.dataTransfer.files;
console.log(files);
if(files.length>1) console.log("noooo!");
else
{
console.log("Drop!");
}
});
});

div {
width:600px;
height:300px;
background:#FFFCCC;
}

<html>

<body>
<div id="dropbox"></div>
</body>

</html>




Answer

Since you are using jQuery, the event you have (inside the drop) is not the original event, but a jQuery wrapper.

You can use the e.originalEvent to get the original event, and there you have the dataTransfer.files:

e.originalEvent.dataTransfer.files

Here is a working example:

jQuery(document).ready(function ($) {
  $('#dropbox').on("dragenter dragstart dragend dragleave dragover drag drop", function (e) {
    e.preventDefault();
  });

  $('#dropbox').on('drop', function(e){
    e.preventDefault();
    debugger;
    var files = e.originalEvent.dataTransfer.files;
    console.log(files);
    if(files.length>1) console.log("noooo!");
    else
    {
      console.log("Drop!");
    } 
  });
});
div {
  width:600px;
  height:300px;
  background:#FFFCCC;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="dropbox"></div>