【Tauri+Next.js】ファイル選択ダイアログで選択した場所にファイル書き込みおよびファイル読み込みする

2023年4月26日

今回はTauriでファイル操作処理を行う方法について紹介していきます。

合わせてよく使用するであろうファイル選択ダイアログの実装もしてみました。

Next.jsのみで作るWebアプリケーションの場合はファイルダウンロード処理を実装する感じになりますが、Tauriの場合はデスクトップアプリケーションなので異なった処理を実装する必要があります。

Tauri+Next.jsの環境構築については下記の記事をご覧ください！

権限の編集

Tauriでファイル操作やダイアログ表示などの操作を行いたい場合、tauri.conf.jsonを編集して操作したい項目の権限を許可してあげる必要があります。

例

{
...中略
  "tauri": {
    "allowlist": {
      "all": false,
      "window": {
        "create": true
      },
      "fs": {
        "all": false,
        "writeFile": true,
        "readFile": true
      },
      "dialog": {
        "all": false,
        "save": true,
        "open": true
      }
    },
...中略
}

設定まわりの詳細は公式サイトをご覧ください。

参考リンク

ファイル書き込み

ではファイル書き込み処理から実装していきます。

STEP

tauri.conf.jsonの修正

以下のようにtauri.conf.jsonに設定を追加します。

{
...中略
  "tauri": {
    "allowlist": {
      "fs": {
        "all": false,
        "writeFile": true
      },
      "dialog": {
        "all": false,
        "save": true
      }
    },
...中略
}

STEP

ファイル書き込み処理の実装

フロントエンドにてファイル書き込み処理を実装します。

import { save } from '@tauri-apps/api/dialog'
import { writeTextFile } from '@tauri-apps/api/fs'

export const Sample = () => {
  return (
    <div>
      <button
        onClick={async () => {
          const data = { a: 1, b: 2, c: 3 }
          const path = await save({ defaultPath: 'sample.txt' })
          if (!path) {
            return
          }

          await writeTextFile(path, JSON.stringify(data))
        }}
      >
        ファイル書き込み
      </button>
    </div>
  )
}

ファイル読み込み

続いてファイル読み込み処理です。

STEP

tauri.conf.jsonの修正

以下のようにtauri.conf.jsonに設定を追加します。

{
...中略
  "tauri": {
    "allowlist": {
      "fs": {
        "all": false,
        "readFile": true
      },
      "dialog": {
        "all": false,
        "open": true
      }
    },
...中略
}

STEP

ファイル読み込み処理の実装

フロントエンドにてファイル読み込み処理を実装します。

import { open } from '@tauri-apps/api/dialog'
import { readTextFile } from '@tauri-apps/api/fs'

export const Sample = () => {
  return (
    <div>
      <button
        onClick={async () => {
          const path = await open()

          // ここでは単一ファイルのみを対象とするためpathが配列の場合は処理を終了
          if (!path || Array.isArray(path)) {
            return
          }

          const data = await readTextFile(path)
          console.log(data)
        }}
      >
        ファイル読み込み
      </button>
    </div>
  )
}