Tengo una página donde los usuarios pueden arrastrar imágenes de una parte y soltarlas en un área determinada. Esto es compatible con la API de arrastrar y soltar . Mientras tanto, también ayudo a los usuarios a arrastrar y soltar imágenes desde su computadora local.
La pregunta es ¿cómo puedo saber si la imagen se arrastra y suelta desde la misma página o se carga? Previamente con Chrome <96, puedo usar event.dataTransfer.files.length para detectar. Si es de arrastrar y soltar, la longitud es 0 , si se carga, la longitud es >0 .
Con las actualizaciones de las versiones más recientes de Chrome, esto ha cambiado. Si el img src es remoto, esto funciona bien como antes. Sin embargo, mis imágenes están codificadas en base64 y serán tratadas como un archivo en Chrome ( length > 0 ). Mi detección en obras más largas.
Aquí hay un código reproducible en mi codepen: https://codepen.io/lz100/pen/BaJVvWr
En Windows y Ubuntu, cuando arrastra la primera imagen (remote src), el recuento de archivos es 0, pero cuando arrastra la segunda (base64), el recuento de archivos es 1. Cuando arrastra y suelta un archivo local, el recuento de archivos es también 1. Así que no tengo forma de saber de dónde viene la imagen. MacOS no tiene este problema.
Si prueba el código anterior en Firefox, las cosas funcionan como yo quería. El recuento de archivos de arrastrar y soltar de la misma página es 0, el recuento de archivos de carga y arrastre local es 1, pero con Safari los tres casos me dan 1, incluso con la URL remota.
Tal vez debería preguntar, ¿hay una forma sólida, en todas las plataformas, en todos los navegadores, de saber si una imagen es un arrastrar y soltar desde la misma página o un arrastrar y soltar de archivos locales?
Resulta que si arrastra y suelta un archivo desde un origen local, no hay descripción en el evento de transferencia, pero si la imagen se transfiere desde la misma página web, podemos agregar manualmente alguna descripción.
Por ejemplo, podemos agregar algunos datos al evento dragStart y detectar en el evento drop
function handleDragStart(e) { e.dataTransfer.setData('text/plain', 'not_uploaded'); // .... } img.addEventListener('dragstart', handleDragStart, false); function handleDrop(e) { e.preventDefault(); e.stopPropagation(); /*If dragged from current page e.dataTransfer.getData("text/plain") will be "not_uploaded"*/ if(e.dataTransfer.getData("text/plain") === "not_uploaded") { // do something } else { // do other thing } } el.addEventListener('drop', handleDrop, false);