PIYO - Tech & Life -

Electronでフォルダ内のファイル一覧を取得して処理する

Electron JS

Electronを触り始めました。

ファイルを指定する

Electronではブラウザよりも柔軟なファイル選択が可能です。フォルダ選択が可能なため、今回は対象のファイルを一括で指定するためにフォルダ選択を用いました。

Electronのレンダラープロセス側のJSで、ボタンを押したらフォルダ選択ダイアログを表示して処理するみたいな部分をまず書いてみます。

// index.js
import { remote } from "electron";
const Dialog = remote.dialog;

$(document).ready(function() {
  $("#folder-select").click(() => {
    Dialog.showOpenDialog(
      null,
      {
        properties: ["openDirectory"],
        title: "フォルダ選択",
        defaultPath: "."
      },
      (folderNames) => {
        const folder = folderNames[0];
        console.log(folder);
      }
    );
  });
});

画面側をざくっとjQueryで作ったのでアレですが、このコードによって対応したボタンを押したらダイアログが開いてくれて、フォルダパスを取得可能です。

フォルダ内のファイルへアクセス

フォルダのパスがわかったなら中にあるファイルの一覧を取得します。

例えば画像ファイルに限定すると仮定して、MIME-Typeがimage/から始まるものだけを対象に処理をします。

import fs from 'fs;
import path from 'path';
import mime from 'mime-types'

fs.readdir(folder, (err, dir) => {
  for (let file of dir) {
    const ext = path.extname(file);
    const type = mime.lookup(ext);
    if (type && /^image\//.test(type)) {
      // do something
    }
  }
});

パスでファイルにアクセスできるの、めっちゃ便利ですねー。ブラウザだとセキュリティ的な理由でこうはいかないし。