Ok.
Here's the complete js script content:
<script>
$(document).ready(function(){
$("#dropFiles").on('dragenter', function(ev) {
// Entering drop area. Highlight area
$("#dropFiles").addClass("highlightDropArea");
});
$("#dropFiles").on('dragleave', function(ev) {
// Going out of drop area. Remove Highlight
$("#dropFiles").removeClass("highlightDropArea");
});
$("#dropFiles").on("dragover", dragover);
// process dropped over file
$("#dropFiles").on('drop', function(ev) {
// Dropping files
ev.preventDefault();
ev.stopPropagation();
// Clear previous messages
$("#messages").empty();
if(ev.originalEvent.dataTransfer){
if(ev.originalEvent.dataTransfer.files.length) {
var droppedFiles = ev.originalEvent.dataTransfer.files;
for(var i = 0; i < droppedFiles.length; i++)
{
console.log(droppedFiles[i]);
$("#messages").append("<br /> <b>Dropped File </b>"+ droppedFiles[i].name);
// Upload droppedFiles[i] to server
}
}
}
$("#dropFiles").removeClass("highlightDropArea");
return false;
});
var dragover = function(e) {
e.preventDefault();
var dataTransfer = e.originalEvent.dataTransfer,
fd = new FormData();
if (dataTransfer.files && dataTransfer.files.length){
$.each(dataTransfer.files,function(i,v) {
fd.append("file",v,v.name)
})
fd.append("url","drop");
upload(fd);
}
}
function upload(fd){
return $.ajax({
url:"processFileUpload.cgi",
type:"POST",
processData:false,
contentType: false,
data:fd,
success:function(){ console.log("Uploaded.",arguments) },
error:function(){ console.log("Error Uploading.",arguments) },
})
}
})
</script>
OUTCOME:
Redirect to the source file path.
chrome debugging:
Resource interpreted as Document but transferred with MIME type image/png: "file:///C:/Users/mypc/Downloads/myImage.png".
What am I still missing?
Thanks.