How to use jQuery's drop event to upload files dragged from the desktop?
It's a little messy (you need to handle at least 3 events) but possible.
First, you need to add eventhandlers for dragover and dragenter and prevent the default actions for these events like that:
$('#div').on( 'dragover', function(e) { e.preventDefault(); e.stopPropagation(); })$('#div').on( 'dragenter', function(e) { e.preventDefault(); e.stopPropagation(); })It's actually important to call preventDefault on these events, otherwise, some browsers may never trigger the drop event.
Then you can add the drop-handler and access the dropped files with e.originalEvent.dataTransfer.files:
$('#div').on( 'drop', function(e){ if(e.originalEvent.dataTransfer && e.originalEvent.dataTransfer.files.length) { e.preventDefault(); e.stopPropagation(); /*UPLOAD FILES HERE*/ upload(e.originalEvent.dataTransfer.files); } });Now you are able to drag files from the desktop/explorer/finder in the div and access them.