FileSystemHandle
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2023年3月.
* Some parts of this feature may have varying levels of support.
安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。
File System Access API の FileSystemHandle インターフェイスは、ファイルまたはディレクトリーのエントリーを表すオブジェクトです。複数のハンドルが同じエントリーを表す可能性もあります。FileSystemHandle を直接扱う場面はほとんどなく、子インターフェイスの FileSystemFileHandle や FileSystemDirectoryHandle を扱うでしょう。
FileSystemHandle がもととなるインターフェイス
以下が、FileSystemHandle インターフェイスがもととなっているインターフェイスの一覧です。
FileSystemFileHandle-
ファイルエントリーのハンドルを表します。
FileSystemDirectoryHandle-
ディレクトリーエントリーへのハンドルを提供します。
インスタンスプロパティ
インスタンスメソッド
isSameEntry()-
2 個の
ハンドルを比較し、対応するエントリー (ファイルまたはディレクトリー) が一致するかを調べます。 queryPermission()Experimental-
現在のハンドルの現在の許可の状態を取得します。
remove()Experimental 非標準-
下層のファイルシステムからハンドルが表すエントリーを除去することを要求します。
requestPermission()Experimental-
ファイルハンドルについて、読み取りまたは読み書きの許可を要求します。
例
種類を調べる
以下のコードでは、ユーザーにファイルピッカーでファイルを選択させ、返されたハンドルがファイルなのかディレクトリーなのかを調べます。
// ファイルハンドルへの参照を保存する let fileHandle; async function getFile() { // ファイルピッカーを開く [fileHandle] = await window.showOpenFilePicker(); if (fileHandle.kind === "file") { // ファイルの場合のコードを実行する } else if (fileHandle.kind === "directory") { // ディレクトリーの場合のコードを実行する } } 許可を確認 / 要求する
以下の非同期関数は、ユーザーがファイルハンドルに読み取りまたは読み書きの許可を与えている場合 true を返します。許可が与えられていない場合、許可を要求します。
// fileHandle は FileSystemFileHandle // withWrite は書き込みなら true に設定される boolean async function verifyPermission(fileHandle, withWrite) { const opts = {}; if (withWrite) { opts.mode = "readwrite"; } // 既に許可が得られているかを確認し、許可が得られていれば true を返す if ((await fileHandle.queryPermission(opts)) === "granted") { return true; } // ファイル操作の許可を要求し、ユーザーが許可すれば true を返す if ((await fileHandle.requestPermission(opts)) === "granted") { return true; } // ユーザーが許可しなかったので、false を返す return false; } エントリーを比較する
以下の関数は、1 個のエントリーをエントリーの配列と比較し、一致するエントリーをすべて取り除いた新しい配列を返します。
function removeMatches(fileEntry, entriesArr) { const newArr = entriesArr.filter((entry) => !fileEntry.isSameEntry(entry)); return newArr; } 仕様書
| Specification |
|---|
| File System # api-filesystemhandle |
ブラウザーの互換性
Loading…