Не удалось обнаружить событие drop в chrome extension при удалении файла

Я создаю расширение chrome, которое позволит пользователю перетаскивать файлы и сохранять их на сервере. Из расширения я ввел элемент div на странице, когда я удаляю файл изображения, браузер отображает изображение на всей странице. Событие drop не обнаруживается в расширении, но если у меня есть элемент ввода с типом файла, и если я удаляю файл в этом элементе, то событие change будет обнаружено.

Не знаете, как определить событие drop из расширения. Любая помощь приветствуется.

файл contentScript.js

//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');
});

Файл манифеста

{
  "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"
  ]
}

Ответ 1

Это действительно запутанная часть обработки перетаскивания. Вы ожидаете просто прослушать событие drop, как вы это делаете с click submit mouseOver и т.д. Но это не сработает, если оно также не имеет события dragOver.

"без обработчика события dragOver, используется обработчик событий по умолчанию из события dragOver, поэтому не запускается событие drop." Ответить здесь

Простейший рабочий пример

/* 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');
});

Рабочий пример из 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);

Ответ 2

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

Когда мышь находится выше нашей области, вы должны вернуть "false".
Этот способ реализовал фильтрацию источников.

Я рекомендую вам прочитать книгу, написанную Дэвидом Фланаганом: "JavaScript: окончательное руководство"