javascript - monitorevents - No se puede detectar el evento Drop en la extensión de Chrome cuando se suelta un archivo

modo debug chrome

Question

Estoy construyendo una extensión de Chrome que permitirá al usuario arrastrar y soltar archivos y guardar lo mismo en el servidor. Desde la extensión, he inyectado un elemento div en la página cuando suelto un archivo de imagen, el navegador muestra la imagen en toda la página. El evento de drop no se está detectando en la extensión, pero si tengo un elemento de entrada con el archivo de tipo y si suelto el archivo en ese elemento, entonces se está detectando el evento de change .

No estoy seguro de cómo detectar el evento drop desde la extensión. Cualquier ayuda es apreciada.

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

Archivo de manifiesto

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

Esta es una parte realmente confusa del manejo de arrastrar y soltar. Es de esperar que solo escuche el evento drop como lo hace con el click submit mouseOver etc. Pero no funcionará a menos que también tenga un evento dragOver .

"sin el controlador de eventos dragOver, se usa el controlador de eventos predeterminado del evento dragOver, por lo tanto, no se activa ningún evento drop". Responda aqui

El ejemplo de trabajo más simple

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

Ejemplo de trabajo de 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);

Answer 2

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

Cuando el mouse está por encima de nuestra área de colocación, debes devolver "false".
De esta manera se realizó el filtrado de fuentes.

Le recomiendo que lea un libro escrito por David Flanagan: "JavaScript: la guía definitiva"