Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use jQuery's drop event to upload files dragged from the desktop?

Is it possible to use jQuery's drop event for dragging files from the desktop?

If so, how do I get the dropped file data?

like image 877
Chin Avatar asked Mar 03 '12 09:03

Chin


1 Answers

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.

http://jsfiddle.net/fSA4N/5/

like image 142
Alex Avatar answered Sep 19 '22 22:09

Alex