Leer archivos de directorios

Clase 20 de 52 • Curso de Electron: Apps de escritorio en Windows y Mac

Resumen

Continuamos con la interacción con los recursos del Sistema Operativo, ya sabemos abrir un dialogo y seleccionar un directorio. En ésta clase vamos a aprender a seleccionar únicamente las imágenes de los directorios usando el modulo de npm is-image.

npm install --save is-image

Con el modulo file-size podemos ver fácilmente el tamaño de los archivos.

Erick Navarro

student•

Esto es una actualización al 31-10-2020, dialog.showOpenDialog retorna result, que contiene en propiedades si el usuario cancelo la operación y en la propiedad "filePaths" viene el arreglo de imagenes.

  // Función de abrir directorio
  ipcMain.on('open-directory-event', (evt, args) => {
    console.log('arguments' + args);
    // Abre dialog
    dialog
      .showOpenDialog(ventana, {
        title: 'Seleccione la nueva ubicación',
        buttonLabel: 'Abrir ubicación',
        properties: ['openDirectory'],
      })
      .then(result => {
        // Verifica si usuario cancelo la operación
        if (result.canceled) {
          return;
        }

        // Obtiene la ruta de la carpeta seleccionada
        const filesPath = result.filePaths[0];

        // Solo muestra el primer directorio
        fs.readdir(filesPath, (error, files) => {
          // Declara arreglo vacio de imagenes
          let images = [];

          // Verifica el error
          if (error) {
            console.log(error);
            return;
          }

          // Recorre archivos uno a uno
          for (let i = 0; i < files.length; i++) {
            // Verifica si es una imagen
            if (isImage(files[i])) {
              // Obtiene información de imagen
              let imageFile = path.join(filesPath, files[i]);
              let imageStats = fs.statSync(imageFile);
              let imageSize = filesize(imageStats.size, { round: 0 });

              // Agrega información de imagen al arreglo
              images.push({ fileName: files[i], src: `file://${imageFile}`, size: imageSize });
            }
          }

          // Muestra imagenes
          console.log(images);
        });
      })
      .catch(err => {
        console.log(err);
      });
  });

Francisco Javier Rodriguez Gomez

student•

Saludos, codifiqué la función un poco diferente, se las comparto

ipcMain.on('open-directory', (event) => {
  dialog.showOpenDialog(win, {
    title: 'Selecciones la nueva ubicación',
    buttonLabel: 'Abrir ubicación',
    properties: ['openDirectory']
  }, (dir) => {
    console.log(dir)
    if (dir){
      // Leer los archivos del directorio
      fs.readdir(dir[0], (err, files) => {
        // De los archivos filtrar solo las imagenes
        files = files.filter(file => isImage(file))
        // Armar objetos con nombre, url y tamaño
        files = files.map(file => {
          const filename = path.join(dir[0],file) 
          return {
            filename: filename,
            src: `file://${filename}`,
            size: filesize(fs.statSync(filename).size, {round: 0})
          }
        })
        console.log(files)
      })
    }
  })
})

daniel kant

student•

filesize

daniel kant

student•

is-image

Grupo Bien Pensado

student•

buenas... estoy trabajando en un proyecto con electro muy parecido a un mega. en donde necesito manejar los archivos de un directorio encarpetarlos y subirlos a un servidor en la nube. ye he encontrado un método con watch para ver los eventos que suceden en el directorio e problema es cuando muevo un archivo entre carpetas me dispara dos eventos un eliminar y agregar. pero tengo una una forma de decir que es el archivo que estoy moviendo en dicho caso tenga que mover múltiples archivos como hago regencia a cada archivo movido

Leer archivos de directorios

Introducción a Electron

Paso a paso para construi aplicaciones con Electron

¿Qué es Electron?

¿Cómo funciona Electron?

Herramientas necesarias

Comenzando con Electron

Creando nuestro proyecto

Nuestra primera ventana

Propiedades de una ventana de Electron

Comenzando con nuestro aplicativo

El frontend y Electron

Configurando nuestro frontend

Herramientas de desarrollo para Electron

Algunos frameworks recomendados

Construyendo el layout

Completar elementos del Layout

Agregando interacción a nuestra aplicación

JavaScript en el frontend

Selecciona imágenes

Buscar imágenes

Añadir filtros a la imagen

Comunicación entre procesos

Accesando recursos de la máquina

Leer archivos de directorios

Generar listas de imagenes

Refactor del proyecto

Usando el diálogo de guardar

Guardar imágenes en disco

Usando cajas de mensajes

Detectando errores

Interactuando con el sistema operativo

Organizando el código del proceso principal

Múltiples ventanas y comunicación entre ellas

Creando assets para una nueva ventana

Consideraciones para múltiples plataformas

Manejo de preferencias

Usuario y contraseña

Creando un ícono en la bandeja del sistema

Imprimiendo

Subir una imagen

Portapapeles con texto o imágenes

Emitiendo notificaciones

Agregando un Menú

Atajos

Protocolos personalizados

Generando un ejecutable para nuestra aplicación

A tener en cuenta para generar ejecutables

Configurando el entorno para construcción

Configurando el entorno para construcción 2

Personalizando nuestro ejecutable

Creando paquetes para distribuir nuestro aplicativo

Considerando instaladores para múltiples plataformas

Firmas digitales con Code Signing

Cierre del curso

Bonus

Integración continua

Escribiendo tests con Ava y Spectron

Desafios

Crear un filtro personalizado

Leer las imágenes ubicaciones remotas (Cloudup)

Previsualización de filtros