ファイルを開くダイアログを表示する

ユーザーにファイルを選択させるための、「ファイルを開く」ダイアログを表示する方法を紹介します。

前提条件

プラグインの追加

ダイアログ機能を利用するには 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)

@tauri-apps/plugin-dialog の open() 関数を使用します。

単一ファイルの選択

基本的なファイル選択ダイアログを表示します。ユーザーがキャンセルした場合は null が返ります。

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

const selected = await open({
  multiple: false, // 単一選択（デフォルト）
  filters: [{
    name: 'Image',
    extensions: ['png', 'jpg', 'jpeg']
  }]
});

if (selected === null) {
  console.log('キャンセルされました');
} else {
  // selected は選択されたファイルのパス (string) です
  console.log('選択されたファイル:', selected);
}

複数ファイルの選択

multiple: true を指定することで、一度に複数のファイルを選択できるようになります。

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

const selected = await open({
  multiple: true,
  filters: [{
    name: 'Text Files',
    extensions: ['txt', 'md', 'json']
  }]
});

if (selected) {
  // selected はパスの配列 (string[]) です
  selected.forEach((path) => {
    console.log(path);
  });
}

フォルダ（ディレクトリ）の選択

ファイルではなくフォルダを選択させたい場合は、directory: true を指定します。

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

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

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

初期ディレクトリの指定

ダイアログが開いたときに最初に表示されるディレクトリを指定できます。

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

// ダウンロードフォルダを初期位置にする
const defaultPath = await downloadDir();

const file = await open({
  defaultPath: defaultPath,
});

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

Rust 側でファイル選択ダイアログを表示する場合は、コマンドを作成し app.dialog().file() を使用します。これによりフロントエンドから invoke で呼び出すことができます。

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

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

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

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

補足

• 戻り値: フロントエンドでは string | string[] | null が返ります。Rust ではコールバックで Option<FilePath> (FilePath はパス情報を包んだ構造体) が渡されます。
• FilePath: Rust の FilePath から実際のパス文字列を取り出すには、.to_path_buf() や into_path_buf() などを使用します（プラグインのバージョンやターゲットによる）。
• filters: 拡張子によるフィルタリングを設定します。extensions 配列にはドットを含めず (.png ではなく png) 指定します。
• directory: これを true にすると、ファイルではなくフォルダ選択モードになります。macOS や Windows など OS によって挙動（見た目）がネイティブに準拠します。