Aprende a manejar el evento de arrastrar y soltar archivos en tu aplicación con Electron Framework.

Cómo manejar la función "arrastrar y soltar archivo" en Electron Framework

La función de arrastrar y soltar es la acción de seleccionar un objeto, en este caso archivos del Sistema Operativo como imágenes, archivos de texto, etc., moverlos (arrastrarlos) y luego colocarlos (soltarlos) en un área alternativa (en este caso un elemento DOM específico del documento).

La especificación del borrador de trabajo de HTML5 incluye soporte para arrastrar y soltar, por lo que no necesitaremos ninguna biblioteca Javascript de terceros para lograrlo. Arrastrar y soltar es una característica importante para mejorar la experiencia del usuario, esta característica está disponible en muchas aplicaciones nativas, por lo que probablemente desee implementarla en su aplicación de escritorio híbrida.

Manejar arrastrar y soltar

Como se mencionó anteriormente, HTML5 proporciona soporte para arrastrar y soltar, por lo que para manejar el evento de arrastrar y soltar en un elemento DOM, puedes usar el siguiente fragmento:

<style>
    #drag-file {
        background-color: blue;
        color:white;
        text-align: center;
        width:300px;
        height:300px;
    }
</style>

<div id="drag-file">
    <p>Arrastra tus archivos aca</p>
</div>

<script>
    (function () {
        var holder = document.getElementById('drag-file');

        holder.ondragover = () => {
            return false;
        };

        holder.ondragleave = () => {
            return false;
        };

        holder.ondragend = () => {
            return false;
        };

        holder.ondrop = (e) => {
            e.preventDefault();

            for (let f of e.dataTransfer.files) {
                console.log('File(s) you dragged here: ', f.path)
            }
            
            return false;
        };
    })();
</script>

Agregamos algún detector de eventos a nuestro elemento DOM deseado. Puede ser el documento o incluso un elemento de extensión. El ondropevento se activará cuando el usuario deje los archivos en el elemento.

Tenga en cuenta que es importante establecer el ondragoverondragleaveondragendlos valores devueltos como false para evitar que el comportamiento por defecto (es decir, con imágenes, si arrastra una imagen del documento actual desaparecerá y será reemplazado por la imagen y no se puede volver atrás).

Cada objeto dentro de la matriz de archivos tiene la siguiente estructura:

{
    "lastModified": 1476893272627,
    "lastModifiedDate": "WedOct19 2016 18: 0 7: 52GMT+0200(MitteleuropäischeSommerzeit)",
    "name": "myfilename.png",
    "path": "C:\path-to\myfilename.png",
    "size": 10648,
    "type": "image/png",
    "webkitRelativePath": ""
}

La implementación del fragmento anterior debería tener como resultado:

Electron drag and drop files in the system

Acerca de esta función en el navegador Google Chrome

Si estás atento, probablemente hayas notado que esta función no necesita ningún módulo incorporado o externo para funcionar. Entonces, ¿cuál es el punto de publicar este artículo si puedes hacerlo de la misma manera que lo haces en Javascript en el navegador? la respuesta es simple, también funciona, sin embargo, no recibirás la misma información.

Si ejecuta el fragmento que se muestra en cualquier navegador que admita estos eventos, encontrará que el objeto tiene una estructura diferente:

{
    "lastModified": 1476893272627,
    "lastModifiedDate": "WedOct19 2016 18: 0 7: 52GMT+0200(MitteleuropäischeSommerzeit)",
    "name": "myfilename.png",
    "size": 10648,
    "type": "image/png",
    "webkitRelativePath": ""
}

Como puede ver en Google Chrome o cualquier navegador actualizado, no contiene la propiedad de la ruta (la ruta completa al archivo). Esto sucede porque de acuerdo con las especificaciones de HTML5, un control de carga de archivos no debería revelar la ruta local real al archivo que ha seleccionado , si manipula su cadena de valor con JavaScript. Este requisito ya está implementado en Internet Explorer 8: la ruta real al archivo se mostrará solo si la página que contiene el control se agrega a la colección de sitios confiables del navegador.

Afortunadamente, Electron es más que un navegador web, por lo tanto, elimina esta limitación conocida (que de alguna manera no es una limitación sino una característica de seguridad que no necesitamos en este caso, ya que una aplicación de escritorio obviamente tiene derechos para modificar cosas en el sistema).

Que te diviertas ❤️!


Interesado en la programación desde los 14 años, Carlos es un programador autodidacta, fundador y autor de la mayoría de los artículos de Our Code World.

Conviertete en un programador más sociable

Patrocinadores