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/*"],
       "js"     : ["jquery.js","contentScript.js"],
       "css"    : ["sforce-dz.css"]
    }
  ],
  "permissions": [
     "cookies",
     "unlimitedStorage"
  ]
}

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./*"],
       "js"     : ["jquery.js","contentScript.js"],
       "css"    : ["sforce-dz.css"]
    }
  ],
  "permissions": [
     "cookies",
     "unlimitedStorage"
  ]
}

• javascript
• jquery
• google-chrome-extension
• drag-and-drop

• Where is this code in your extension, and show us the manifest and/or how you inject this code. – Xan Commented Dec 8, 2014 at 16:08
• I edited my ment. THe div is getting injected just fine. All I am not able to do is not able to detect the drop event in the javascript contentScript – Sam Commented Dec 8, 2014 at 16:14

2 Answers 2

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);

dropdiv.on('dragover', function (e) {
    return false;
});

When mouse is above our drop-area, you must return 'false'.
This way realized filtering of sources.

I remend you to read a book written by David Flanagan: "JavaScript: The Definitive Guide"