Arrastrar y soltar archivos en ElectronJS

ElectronJS es un marco de código abierto que se utiliza para crear aplicaciones de escritorio nativas multiplataforma utilizando tecnologías web como HTML, CSS y JavaScript que pueden ejecutarse en los sistemas operativos Windows, macOS y Linux. Combina el motor Chromium y NodeJS en un solo tiempo de ejecución.
Hay varias diferencias entre una operación de arrastrar y soltar en aplicaciones web tradicionales y Electron. Una de las principales diferencias es que las aplicaciones de Electron funcionan con el sistema de archivos nativo en el entorno del sistema operativo. Por lo tanto, necesitamos obtener la ruta de archivo absoluta para cualquier archivo arrastrado a la aplicación Electron desde el cuadro de diálogo de archivo nativo en la máquina del usuario. Una vez que hemos obtenido la ruta del archivo, podemos realizar operaciones de archivos usando NodeJSmódulo fs o suba el archivo a un servidor. Electron utiliza la API de archivos HTML5 para trabajar con archivos en el sistema de archivos nativo. Este tutorial demostrará cómo implementar la funcionalidad de arrastrar y soltar para archivos nativos en una aplicación de Electron.
Suponemos que está familiarizado con los requisitos previos que se describen en el enlace mencionado anteriormente. Para que Electron funcione, node y npm deben estar preinstalados en el sistema.
 

• Estructura del proyecto: 

Ejemplo: Comenzaremos construyendo la aplicación electrónica básica siguiendo los pasos dados. 

• Paso 1: navegue a un directorio vacío para configurar el proyecto y ejecute el siguiente comando, 

npm init

• Para generar el archivo package.json . Instale Electron usando npm si no está instalado. 

npm install electron --save

• Este comando también creará el archivo package-lock.json e instalará las dependencias requeridas de node_modules . Una vez que Electron se haya instalado correctamente, abra el archivo package.json y realice los cambios necesarios con la clave de secuencias de comandos . Cree la carpeta de activos según la estructura del proyecto. Copie cualquier archivo de imagen de su elección en la carpeta de activos y asígnele el nombre image.png . En este tutorial, utilizaremos el logotipo de Electron como archivo image.png . Este archivo de imagen se arrastrará y soltará en la ventana del navegador de la aplicación Electron. 
  paquete.json: 

{
  "name": "electron-drag",
  "version": "1.0.0",
  "description": "File Drag and Drop in Electron",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [
    "electron"
  ],
  "author": "Radhesh Khanna",
  "license": "ISC",
  "dependencies": {
    "electron": "^8.3.0"
  }
}

• Paso 2: Cree un archivo main.js de acuerdo con la estructura del proyecto. Este archivo es el Proceso Principal y actúa como un punto de entrada a la aplicación. Copie el código Boilerplate para el archivo main.js como se indica en el siguiente enlace . Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.
  principal.js: 

const { app, BrowserWindow } = require('electron')
 
function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
 
  // Load the index.html of the app.
  win.loadFile('src/index.html')
 
  // Open the DevTools.
  win.webContents.openDevTools()
}
 
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
// This method is equivalent to 'app.on('ready', function())'
app.whenReady().then(createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
 
app.on('activate', () => {
    // On macOS it's common to re-create a window in the
    // app when the dock icon is clicked and there are no
    // other windows open.
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
 
// In this file, you can include the rest of your
// app's specific main process code. You can also
// put them in separate files and require them here.

• Paso 3: cree el archivo index.html y el archivo index.js dentro del directorio src de acuerdo con la estructura del proyecto. También copiaremos el código Boilerplate para el archivo index.html del enlace mencionado anteriormente. Hemos modificado el código para adaptarlo a las necesidades de nuestro proyecto.
  índice.html: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
    <!-- https://electronjs.org/docs/tutorial
                           /security#csp-meta-tag -->
    <meta http-equiv="Content-Security-Policy"
          content="script-src 'self' 'unsafe-inline';" />
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node
    <script>
        document.write(process.versions.node)
    </script>, Chrome
    <script>
        document.write(process.versions.chrome)
    </script>, and Electron
    <script>
        document.write(process.versions.electron)
    </script>.
 
    <br><br>
    <h3>Drag and Drop Files in the Window.</h3>
 
    <!-- Adding Individual Renderer Process JS File -->
    <script src="index.js"></script>
  </body>
</html>

• Salida: en este punto, nuestra aplicación electrónica básica está configurada. Para iniciar la aplicación Electron, ejecute el comando: 

npm start

Con la API de archivos HTML5 , los usuarios pueden trabajar directamente con los archivos nativos en el entorno del sistema operativo. Esto es posible porque la interfaz de archivos del DOM proporciona una abstracción para el sistema de archivos nativo subyacente. Electron mejora la interfaz de archivos del DOM al agregarle un atributo de ruta . Este atributo de ruta expone la ruta de archivo absoluta de los archivos en el sistema de archivos. Haremos uso de esta funcionalidad para obtener la ruta de archivo absoluta de un archivo arrastrado y soltado en la aplicación Electron. Para obtener información más detallada, consulte este enlace .
Todos los eventos de instancia de la operación de arrastrar y soltar pertenecen a la interfaz DragEvent . Este evento es un evento DOMque representa una operación de arrastrar y soltar de principio a fin. Esta interfaz también hereda propiedades de MouseEvent y de la interfaz de eventos global . Tiene propiedades de instancia específicas para la transferencia de datos, GlobalEventHandlers y eventos de instancia que hemos utilizado en nuestro código. Para obtener información más detallada, consulte este enlace .
index.js: agregue el siguiente fragmento en ese archivo. 

document.addEventListener('drop', (event) => {
    event.preventDefault();
    event.stopPropagation();
 
    for (const f of event.dataTransfer.files) {
        // Using the path attribute to get absolute file path
        console.log('File Path of dragged files: ', f.path)
      }
});
 
document.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
  });
 
document.addEventListener('dragenter', (event) => {
    console.log('File is in the Drop Space');
});
 
document.addEventListener('dragleave', (event) => {
    console.log('File has left the Drop Space');
});

A continuación, se ofrece una explicación detallada de todos los eventos de instancia y las propiedades de la API de archivo HTML5 utilizada en el código. Todos los eventos de instancia de la interfaz DragEvent se activarán en el objeto de documento global y no se pueden activar directamente en un elemento DOM específico. 

• event.dataTransfer Esta propiedad de instancia se utiliza para representar los datos que se transfieren durante una operación de arrastrar y colocar. En nuestro caso, los datos que se transfieren son un archivo y, por lo tanto, usamos event.dataTransfer.files y buscamos la ruta absoluta del archivo usando el atributo de ruta proporcionado por Electron. También podemos arrastrar y soltar varios archivos a la vez. En caso de que los datos sean una selección de texto, simplemente podemos usar el método event.dataTransfer.setData(key, text) al iniciar una operación de arrastre. Este método establece una clave única para los datos de texto que se transfieren. Para recuperar la selección de texto en la Operación Soltar, simplemente podemos usar event.dataTransfer.getData(key)método. Este método devolverá cualquier dato que se configuró usando la clave única provista.
• arrastre: Evento Este evento se activa cuando se arrastra un elemento o una selección de texto sobre un destino de colocación válido (cada pocos cientos de milisegundos), como otro elemento DOM. El patrón de activación de este evento depende del movimiento del puntero del ratón. De forma predeterminada, este evento se activa cada 50 ms cuando el puntero del mouse no se mueve sobre un destino de colocación válido, sino mucho más rápido entre 5 ms y 1 ms aproximadamente, pero este comportamiento varía. La propiedad del controlador de eventos para este evento es ondragover . De forma predeterminada, un elemento o una selección de texto no se puede colocar en otros elementos DOM. Para permitir una caída, debemos evitar el manejo predeterminado del elemento. Por lo tanto, hemos utilizado event.preventDefault()método para este mismo propósito. El manejo predeterminado de un elemento se abre como enlace en el navegador al soltarlo.
• drop: Evento Este evento se activa cuando un elemento o una selección de texto se coloca en un destino de colocación válido, como otro elemento DOM. La propiedad del controlador de eventos para este evento es ondrop . Necesitamos evitar el manejo predeterminado del elemento en este Evento también como se hizo para el Evento de arrastre .
• dragenter: Evento Este evento se activa cuando un elemento arrastrado o una selección de texto ingresa en un destino de colocación válido, como otro elemento DOM. La propiedad del controlador de eventos para este evento es ondrageneter .
• dragleave: evento Este evento se activa cuando un elemento arrastrado o una selección de texto deja un destino de colocación válido, como otro elemento DOM. La propiedad del controlador de eventos para este evento es ondragleave .

Los eventos de instancia dragStart , drag , dragend y dragexit no se activarán en este ejemplo de código en particular y, por lo tanto, se han excluido del mismo. Todos estos eventos de instancia se activan en el destino de arrastre y, en este caso, el destino de arrastre no existe en la aplicación. La operación de arrastre de archivos se inicia desde fuera de la aplicación desde el cuadro de diálogo del sistema de archivos nativo. Todos los eventos de instancia utilizados en el código anterior se activan en el destino de destino que se encuentra dentro de la aplicación. 
Nota: El evento.stopPropagation()El método evita que se llame a la propagación del mismo evento. Propagación significa transferir hacia arriba a los elementos DOM principales o transferir hacia abajo a los elementos DOM secundarios.
Producción: