File drag and drop event in jquery

I came across this question while researching some AJAX file upload techniques.

I created a drag and drop upload script today (its still in proof of concept stage but heres the basic steps that I took.

$('drag-target-selector').on('drop', function(event) { //stop the browser from opening the file event.preventDefault(); //Now we need to get the files that were dropped //The normal method would be to use event.dataTransfer.files //but as jquery creates its own event object you ave to access  //the browser even through originalEvent.  which looks like this var files = event.originalEvent.dataTransfer.files; //Use FormData to send the files var formData = new FormData(); //append the files to the formData object //if you are using multiple attribute you would loop through  //but for this example i will skip that formData.append('files', files[0]); }

now you can send formData to be processed by a php script or whatever else you want to use. I didn't use jquery in my script as there a lot of issues with it it seemed easier to use regular xhr. Here is that code

var xhr = new XMLHttpRequest();    xhr.open('POST', 'upload.php');    xhr.onload = function() {            console.log(xhr.responseText);    };    xhr.upload.onprogress = function(event) {            if (event.lengthComputable) {                    var complete = (event.loaded / event.total * 100 | 0);                    //updates a <progress> tag to show upload progress                    $('progress').val(complete);            }    };xhr.send(formData);