Question

This works:

var picdrag = document.getElementById('picdrag');
picdrag.addEventListener('drop', picSelect, false);
function picSelect(e) {
    var pics = e.dataTransfer.files;
}

This doesn’t:

$('#picdrag').on('drop', function(e) {picSelect(e);});
function picSelect(e) {
    var pics = e.dataTransfer.files;
}

because it reports an error 'e.dataTransfer is undefined'. I hate it when I don’t know why something works or doesn’t work. This is specific to the drop event, like jQuery handles it differently.

Answer 1

You can try:

var pics = e.originalEvent.dataTransfer.files;

From the docs:

Certain events may have properties specific to them. Those can be
accessed as properties of the event.originalEvent object. To make
special properties available in all event objects, they can be added
to the jQuery.event.props array. This is not recommended, since it
adds overhead to every event delivered by jQuery.

There is also an example that should be of interest:

// add the dataTransfer property for use with the native `drop` event  
// to capture information about files dropped into the browser window
jQuery.event.props.push("dataTransfer");