Unable to detect the drop event in chrome extension when dropped a file

Question

I am building a chrome extension which will let the user to drag and drop files and save the same to the server. From the extension I have injected a div element in the page when I drop an image file the browser is displaying the image on the entire page. The drop event is not getting detected in the extension, but if I have a input element with the type file and if I drop the file on that element then the change event is getting detected.

Not sure how to detect the drop event from the extension. Any help is appreciated.

contentScript.js file

//building the Dropzone Div
var dropdiv = $("<div>", {
  id    :"sforce-dz-dropZone",
  class : "sforce-dz-dropZonebg"
}).text('Add you\'re files here');

//injecting the drop div in the page
$("input[name=attachFile]").after(dropdiv);

//adding 'drop' event listener to the div.
//This is not getting logged at all.
$("#sforce-dz-dropZone").on('drop', function(e){
  e.preventDefault();
  e.stopPropagation();

  var files = e.target.files || e.dataTransfer.files;
  // process all File objects
  for (var i = 0, f; f = files[i]; i++) {
    console.log('the file name is '+ f.name);
  }

});

//Adding another event. click, just to see if the events are getting triggered.
//When clicked on the div the console is logging the below string.
$("#sforce-dz-dropZone").on('click',function(){
  console.log('clicked');
});

Manifest File

{
  "name": "name",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "text",
  "author": "someone",
  "content_scripts": [
    {
      "matches" : ["https://*.mysite.com/*"],
       "js"     : ["jquery.js","contentScript.js"],
       "css"    : ["sforce-dz.css"]
    }
  ],
  "permissions": [
     "cookies",
     "unlimitedStorage"
  ]
}

Answer 1

This is a really confusing part of handling drag and drop. You'd expect to just listen for the drop event as you do with click submit mouseOver etc. But it won't work unless it also has a dragOver event.

"without the dragOver event handler, the default event handler from dragOver event is used, thus, no drop event is triggered." Answer Here

Simplest working example

/* events fired on the drop targets */
document.addEventListener("dragover", function( event ) {
  // prevent default to allow drop
  event.preventDefault();
});

document.addEventListener("drop", function( event ) {
  // prevent default action (open as link for some elements)
  event.preventDefault();
  console.log('dropped');
});

Working example from HTML5Rocks

function handleFileSelect(evt) {
  evt.stopPropagation();
  evt.preventDefault();

  var files = evt.dataTransfer.files; // FileList object.

  // files is a FileList of File objects. List some properties.
  var output = [];
  for (var i = 0, f; f = files[i]; i++) {
    output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
                f.size, ' bytes, last modified: ',
                f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
                '</li>');
  }
  document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
}

function handleDragOver(evt) {
  evt.stopPropagation();
  evt.preventDefault();
  evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
}

// Setup the dnd listeners.
var dropZone = document.getElementById('drop_zone');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFileSelect, false);