はじめに

tauri続きやってみます。結構前にやったファイルを開く機能の続きで、今回はファイルを保存する機能を追加します。

kojirooooocks.hatenablog.com

本題

今回はファイル保存機能を追加します。

実装

コード(React)

import { useState } from "react";
import { open, save } from "@tauri-apps/plugin-dialog";
import { readTextFile, writeTextFile } from "@tauri-apps/plugin-fs";

function App() {
  const [fileText, setFileText] = useState("");

  async function openFile() {
    const selected = await open({
      multiple: false,
      filters: [{ name: "Text", extensions: ["txt", "md"] }],
    });

    if (typeof selected === "string") {
      const content = await readTextFile(selected);
      setFileText(content);
    }
  }

  async function saveFile() {
    const filePath = await save({
      filters: [{ name: "Text", extensions: ["txt", "md"] }],
    });

    if (filePath) {
      await writeTextFile(filePath, fileText);
    }
  }

  return (
    <main className="container">
      <div>
        <button onClick={openFile}>ファイルを開く</button>
        <button onClick={saveFile}>ファイルを保存</button>
        <textarea
          value={fileText}
          onChange={(e) => setFileText(e.target.value)}
          rows={10}
          cols={50}
        />
      </div>
    </main>
  );
}

export default App;

発生したエラー

動作確認したところ、コンソールに以下のエラーが発生。

Unhandled Promise Rejection: plugin dialog not found

プラグインが見つからないエラーぽい。

プラグインをインストール

$ npm install @tauri-apps/plugin-dialog
$ npm install @tauri-apps/plugin-fs

Cargo.tomlに依存関係を追加

$ cd src-tauri
$ cargo add tauri-plugin-dialog
$ cargo add tauri-plugin-fs
$ cd ..

プラグインを登録

src-tauri/src/lib.rsを修正

#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
    tauri::Builder::default()
        .plugin(tauri_plugin_opener::init())
        .plugin(tauri_plugin_dialog::init())
        .plugin(tauri_plugin_fs::init())
        .invoke_handler(tauri::generate_handler![greet])
        .run(tauri::generate_context!())
        .expect("error while running tauri application");
}

動作確認

再度実行したところ、ファイルを開くことはできました。

しかし、ファイルを保存しようとすると新たなエラーが発生。

Unhandled Promise Rejection: fs.write_text_file not allowed. Permissions associated with this command: fs:allow-app-write, fs:allow-app-write-recursive, fs:allow-appcache-write, fs:allow-appcache-write-recursive, fs:allow-appconf..

ファイルの書き込み権限が不足してるっぽい。

対応4: パーミッションを追加

src-tauri/capabilities/default.jsonを修正する

{
  "$schema": "../gen/schemas/desktop-schema.json",
  "identifier": "default",
  "description": "Capability for the main window",
  "windows": ["main"],
  "permissions": [
    "core:default",
    "opener:default",
    "dialog:default",
    "fs:default",
    "fs:allow-read-text-file",
    "fs:allow-write-text-file"
  ]
}