特定の拡張子（画像など）だけ選べるようにする

ファイルを開くダイアログや保存ダイアログにおいて、ユーザーが選択できるファイルの種類を制限（フィルタリング）する方法を紹介します。

前提条件

プラグインの追加

ダイアログ機能を利用するには 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 (または allow-save) 権限を追加します。

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

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

filters オプションを使用します。

基本的な拡張子フィルタ（画像ファイル）

特定の拡張子のみを表示・選択可能にします。

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

const imagePath = await open({
  filters: [{
    name: 'Images', // ユーザーに表示されるフィルター名（OSによる）
    extensions: ['png', 'jpg', 'jpeg', 'gif', 'webp'] // 許可する拡張子（ドットなし）
  }]
});

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

複数のカテゴリを設定する

「画像ファイル」と「ドキュメント」のように、複数のフィルタカテゴリを用意して、ユーザーがダイアログ上で切り替えられるようにします。

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

const file = await open({
  filters: [
    { name: 'Image Files', extensions: ['png', 'jpg', 'svg'] },
    { name: 'Text Documents', extensions: ['txt', 'md', 'json'] },
    { name: 'All Files', extensions: ['*'] } // ワイルドカードですべて許可
  ]
});

保存ダイアログでの使用例

save 関数でも同様に filters を使用できます。

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

const path = await save({
  defaultPath: 'my-data',
  filters: [{
    name: 'JSON Data',
    extensions: ['json']
  }]
});
// ユーザーが拡張子を入力しなくても、自動的に .json が付与されることが多いです（OSによる）

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

Rust 側でフィルタ付きのダイアログを表示する場合は、コマンドを作成し add_filter を使用します。これによりフロントエンドから invoke で呼び出すことができます。

フィルタ付きダイアログ

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

    app.dialog().file()
        .add_filter("Image", &["png", "jpg", "jpeg"])
        .add_filter("All", &["*"])
        .pick_file(|file_path| {
            match file_path {
                Some(path) => println!("Selected: {:?}", path),
                None => println!("Cancelled"),
            }
        });
}

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

補足

• extensions の指定: 拡張子は .（ドット）を含めずに指定します。
• ワイルドカード: extensions: ['*'] を指定すると、すべてのファイルが表示されます。
• name プロパティ: Windows などのファイル選択ダイアログ右下のプルダウンメニューに表示されるラベルです。ユーザーに「何を選べばいいか」を伝える重要な情報です。