Temario del Tutorial->51 - API FILE (drag and drop de una imagen del escritorio)


Hemos visto que con la API FILE podemos leer archivos que se encuentran en forma local solo disponiendo un control de tipo file y mediante el botón que muestra el navegador seleccionar el archivo que queremos leer.

Pero veremos ahora que las API de DRAG AND DROP que provee HTML5 nos permiten arrastrar archivos que se encuentran en el escritorio de la computadora (es decir fuera del navegador) y proceder a su lectura como hemos visto.

Problema

Permitir arrastrar una imagen que se encuentre en el escritorio de la computadora y posteriormente mostrarla en el fondo de un div.

Solución

<!DOCTYPE HTML>
<html>
<head>
  <title>Título de la página</title>  
  <meta charset="UTF-8">

<style>
#caja {
  margin: 10px;
  width: 350px;
  height: 350px;
  border: 5px dashed gray;
  border-radius: 8px;
  background: rgb(230,230,230);
  background-repeat: no-repeat;
  background-size: 100%;
}
</style>
  
  
<script>
    window.addEventListener('load', inicio, false);

    function inicio() {
        document.getElementById('caja').addEventListener('dragover', permitirDrop, false);    
        document.getElementById('caja').addEventListener('drop', drop, false);
    }
    
    function drop(ev)
    {
        ev.preventDefault();
        var arch=new FileReader();
        arch.addEventListener('load',leer,false);
        arch.readAsDataURL(ev.dataTransfer.files[0]);        
    }      
    
    function permitirDrop(ev)
    {
        ev.preventDefault();
    }    
    
    function leer(ev) {
        document.getElementById('caja').style.backgroundImage="url('" + ev.target.result + "')";
    }
</script>
</head>

<body>
<p>Arrastrar una imagen desde el escritorio.</p>
<div id="caja">
</div>
</body>
</html>

El resultado en el navegador al cargar esta página es:

drag and drop API FILE

Hemos dispuesto que el archivo solo se pueda arrastrar desde el escritorio (podemos hacer que se pueda arrastrar o seleccionar de un control file como hemos visto hasta ahora)

Nuestro bloque HTML ahora queda muy cortito:

<body>
<p>Arrastrar una imagen desde el escritorio.</p>
<div id="caja">
</div>
</body>

Registramos los eventos dragover y drop de nuestro div:

    function inicio() {
        document.getElementById('caja').addEventListener('dragover', permitirDrop, false);    
        document.getElementById('caja').addEventListener('drop', drop, false);
    }

Cuando el usuario suelta la imagen dentro del div procedemos a leer el archivo y registrar el evento load para que se muestre posteriormente:

    function drop(ev)
    {
        ev.preventDefault();
        var arch=new FileReader();
        arch.addEventListener('load',leer,false);
        arch.readAsDataURL(ev.dataTransfer.files[0]);        
    }

Mostramos la imagen en la función leer:

    
    function leer(ev) {
        document.getElementById('caja').style.backgroundImage="url('" + ev.target.result + "')";
    }

Desactivamos en la función permitirDrop la actividad por defecto que hace un navegador cuando se arrastra una imagen (que por defecto muestra la imagen ocupando toda la ventana del navegador):

    function permitirDrop(ev)
    {
        ev.preventDefault();
    }

Retornar