Leer archivos de directorios

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);
      });
  });

C20. Leer archivos de directorios

Repositorio de la clase:

https://github.com/joseluis1061/imagepics/tree/c20_leerArchivosYDirectorios

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.

filesize() ⇒ Ayuda a comprobar el tamaño de un archivo seleccionado.

npm install --save filesize

fs es un modulo de node que nos permite leer un directorio/s para importarlo basta con importarlo

const fs = require('fs')

En nuestro caso usaremos sus estadísticas para determinar el tamaño de la imagen.

let stats = fs.statSync(imagesFile);

Para esta clase solo vamos a agregar mas funcionalidades a nuestro evento open-dirctory. Requerimos los siguientes paquetes para hacer posible el objetivo de la clase:

// Rutas de un archivo
const path = require('path');
// File sistem para leer archivos
const fs = require('fs')
// Modulo para verificar si un archivo es de tipo imagen
const isImage = require('is-image');
// Permite traducir información de tamaños a un formato humano
const filesize = require("filesize");

const { app, BrowserWindow, ipcMain, dialog } = require('electron');

Las funciones de nuestro evento son las siguientes:

// Abrir un directorio con el evento open-directory
ipcMain.on('open-directory', (event) => {
  // Abro una ventana de dialogo para seleccionar el directorio
  // Requiere la ventana desde donde se llamara y opciones del dialogo
  dialog.showOpenDialog( win, {
    // Titulo de la ventana de dialogo
    title: 'Selecciona un directorio',
    // Texto del botón principal
    buttonLabel: 'Abrir',
    // Que tipo de archivos puede seleccionar
    properties: ['openFile', 'openDirectory']
  }).then(result => {
    // Es una promesa y por lo tanto retorna un resultado con diferente información
    // console.log(result.filePaths) // Arreglo rutas a los archivos elegidos
    const dir = result.filePaths;
    // Array con imagenes
    const images = [];
    // Si obtuvimos rutas de archivos
    if (dir.length > 0){
      // Leer el primer directorio elegido
      fs.readdir(dir[0], (err, files) => {
        // Recorrer todos los archivos leidos
        for (let i = 0; i < files.length; i++){
          // Seleccionar solo los que sen de tipo imagen
          if(isImage(files[i])){
            // Me retorna la ruta de la imagen
            let imagesFile = path.join(dir[0], files[i]);
            // Los stats son estadisticas de un archivo
            // Nos intereza su tamaño
            let stats = fs.statSync(imagesFile);
            // Me retorna el tamaño de la imagem en un formato humano
            let size = filesize.filesize( stats.size, {round:0});
            // Agrego la ruta de la imagen y su tamaño al array de imagenes
            images.push({
              filename:files[i], 
              src : `file://${imagesFile}`,
              size: size
            })
          }
        }
        // Verificamos los archivos que obtuvimos 
        console.log(images)
      });
    }
  }).catch(err => {
    console.log(err)
  })  
})

El archivo index.js en mi caso luce así:

'use strict'
// Rutas de un archivo
const path = require('path');
// File sistem para leer archivos
const fs = require('fs')
// Modulo para verificar si un archivo es de tipo imagen
const isImage = require('is-image');
// Permite traducir información de tamaños a un formato humano
const filesize = require("filesize");

const { app, BrowserWindow, ipcMain, dialog } = require('electron');

// Detecta si la app corre sobre una Mac
const isMac = process.platform === 'darwin';
// Detectar si estamos en modo de desarrollo
const isDev = process.env.NODE_ENV !== 'production';

// Ventana principal
let win

function createMainWindow() {
  win = new BrowserWindow({
    title: 'Images Resizes',
    width: isDev ? 800:1000,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  });

  if(isDev){
    win.webContents.openDevTools();
  }


  win.loadFile(path.join(__dirname, './renderer/index.html'));
};

app.whenReady().then(() => {
  createMainWindow();

  // Este fragmento me garantiza que si no tengo ninguna ventana
  // Se cree una al activar la aplicación.
  app.on('activate', () => {
    if(BrowserWindow.getAllWindows().length === 0){
    createMainWindow();
  }
  });
})

// Evento: Verificar si todas la ventanas estan cerradas al cerrar la aplicación
app.on('window-all-closed', ()=>{
  // Si no corre en Mac
  if(!isMac){
    app.quit(); //Cerrar todas las ventanas
  }
});

// Evento desde el backend
// Si desde el backend detecto un evento ping en el front
ipcMain.on('ping', (event, arg) => {
  // Verifico la información que me llego desde el frontend
  console.log(`ping recibido en el backend: \n ${arg}`);

  // Envia una respuesta del backend al frontend
  event.sender.send('pong', new Date());
})

// Abrir un directorio con el evento open-directory
ipcMain.on('open-directory', (event) => {
  // Abro una ventana de dialogo para seleccionar el directorio
  // Requiere la ventana desde donde se llamara y opciones del dialogo
  dialog.showOpenDialog( win, {
    // Titulo de la ventana de dialogo
    title: 'Selecciona un directorio',
    // Texto del botón principal
    buttonLabel: 'Abrir',
    // Que tipo de archivos puede seleccionar
    properties: ['openFile', 'openDirectory']
  }).then(result => {
    // Es una promesa y por lo tanto retorna un resultado con diferente información
    console.log(result.canceled); // si el diálogo fue o no cancelado
    console.log(result.filePaths) // Arreglo rutas a los archivos elegidos
    console.log(result.bookmarks ) // Arreglo rutas a los archivos elegidos en Mac
    const dir = result.filePaths;
    // Array con imagenes
    const images = [];
    // Si obtuvimos rutas de archivos
    if (dir.length > 0){
      // Leer el primer directorio elegido
      fs.readdir(dir[0], (err, files) => {
        // Recorrer todos los archivos leidos
        for (let i = 0; i < files.length; i++){
          // Seleccionar solo los que sen de tipo imagen
          if(isImage(files[i])){
            // Me retorna la ruta de la imagen
            let imagesFile = path.join(dir[0], files[i]);
            // Los stats son estadisticas de un archivo
            // Nos intereza su tamaño
            let stats = fs.statSync(imagesFile);
            // Me retorna el tamaño de la imagem en un formato humano
            let size = filesize.filesize( stats.size, {round:0});
            // Agrego la ruta de la imagen y su tamaño al array de imagenes
            images.push({
              filename:files[i], 
              src : `file://${imagesFile}`,
              size: size
            })
          }
        }
        // Verificamos los archivos que obtuvimos 
        console.log(images)
      });
    }
  }).catch(err => {
    console.log(err)
  })  
})

filesize

is-image