Why does this simple JavaScript job and its jQuery equivalent fail?

Question

I found javascript that deals with the HTML5 File Reader API. It is written in pure javascript, I am in the process of converting it to a jQuery script. But I am stuck at this point.

It works:

document.getElementById('drop-area').addEventListener('drop', function(e) { e.preventDefault(); e.stopPropagation(); console.log(e.dataTransfer.files); // outputs the right stuff }, false); 

This fails:

 $('#drop-area').on('drop', function(e) { e.preventDefault(); e.stopPropagation(); console.log(e.dataTransfer.files); // ERROR: e.dataTransfer is undefined }); 

What is the solution to this problem?

Answer 1

jQuery does not normalize the dataTransfer event dataTransfer , in order to access it, you have to go through the original event.

 console.log(e.originalEvent.dataTransfer.files); 

You can also set it so that dataTransfer added to the jQuery event object as follows.

 jQuery.event.props.push( "dataTransfer" );