複数のファイルを一度に選択させる

ユーザーに複数のファイルを一括で選択させるダイアログの実装方法を紹介します。

前提条件

プラグインの追加

ダイアログ機能を利用するには dialog プラグインが必要です。

npm run tauri add dialog

src-tauri/src/lib.rs に .plugin(tauri_plugin_dialog::init()) が追加されていることを確認してください。

Permissions (権限) の設定

src-tauri/capabilities/default.json に dialog:allow-open 権限を追加します。

{
  "permissions": [
    ...,
    "dialog:default",
    "dialog:allow-open"
  ]
}

1. フロントエンドから作成する (TypeScript)

open() 関数で multiple: true オプションを指定します。

基本的な複数ファイル選択

ShiftキーやCtrlキー（macOSではCmdキー）を使った複数選択が可能になります。
戻り値は選択されたパスの配列 (string[])、またはキャンセルの場合は null となります。

import { open } from '@tauri-apps/plugin-dialog';

const selectedPaths = await open({
  multiple: true,
});

if (selectedPaths) {
  // 配列として返ってくるので、ループで処理できます
  console.log(`選択されたファイル数: ${selectedPaths.length}`);
  selectedPaths.forEach((filePath) => {
    console.log(filePath);
  });
} else {
  console.log('キャンセルされました');
}

拡張子フィルタ付きの複数選択

特定の拡張子（例：画像ファイル）のみを複数選択させる例です。

import { open } from '@tauri-apps/plugin-dialog';

const images = await open({
  multiple: true,
  filters: [{
    name: 'Images',
    extensions: ['png', 'jpg', 'jpeg', 'webp']
  }]
});

if (images) {
  console.log('選択された画像:', images);
}

フォルダの複数選択

ファイルではなくフォルダを複数選択させたい場合は、directory: true と multiple: true を組み合わせます。

import { open } from '@tauri-apps/plugin-dialog';

const folders = await open({
  multiple: true,
  directory: true
});

if (folders) {
  console.log('選択されたフォルダ:', folders);
}

2. バックエンドから作成する (Rust)

Rust 側で複数ファイル選択を行う場合は、コマンドを作成し pick_files (複数形) を使用します。これによりフロントエンドから invoke で呼び出すことができます。

複数ファイル選択ダイアログの表示

#[tauri::command]
fn pick_files_dialog(app: tauri::AppHandle) {
    use tauri_plugin_dialog::DialogExt;

    app.dialog().file()
        .pick_files(|file_paths| {
            // file_paths: Option<Vec<FilePath>>
            match file_paths {
                Some(paths) => {
                    println!("Selected {} files", paths.len());
                    for path in paths {
                        println!("- {:?}", path);
                    }
                }
                None => println!("Cancelled"),
            }
        });
}

// main関数などでハンドラを登録します
// .invoke_handler(tauri::generate_handler![pick_files_dialog])

補足

• 戻り値: open 関数で multiple: true を指定した場合、成功時の戻り値の型は string[]（文字列の配列）になります。multiple: false（デフォルト）の場合は string です。キャンセル時はどちらも null です。
• 処理の重さ: 大量のファイルが選択された場合、その後の読み込み処理などでUIが固まらないように、非同期処理などを適切に組み合わせることを推奨します。