SQL.jsを使用してDB内の項目をひとつずつ取得して表にしたい

Question

前提・実現したいこと

html、SQL.js、SQLiteを使用して、社内のフォルダにDBの内容が見られるhtmlを置いておけば、アクセスした人がサーバーを毎度つながずにみられる方法を試しています。

前回の質問でSQL.jsで実装ができる事を確認できたので、ここから使いやすいようにしたいと考え、

1)DBの内容を一つずつ取り出して表にしたい
2)閲覧するDBのテーブルは決まっているので、フォルダを選択する手間を無くしたい

と考えています。

発生している問題・エラーメッセージ

1)についてとりあえずログで一つずつ取り出せるようにしようと、前回の質問でいただいたコードに下記のコードを書き加えたコードを実装したところ、undefinedと表示される状態でした。

<div>
  <input id="file-field" type="file" accept=".sqlite3">
</div>

<div>
  <input id="query-field" placeholder="SELECT * FROM users;" disabled>

  <button id="execute-button" disabled>EXECUTE QUERY</button>
</div>

<div>
  <pre id="result-text"></pre>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.min.js"></script>
<script>
initSqlJs({
  locateFile: (file) => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.wasm`,
}).then((SQL) => {
  let db = null;

  const fileField = document.querySelector("#file-field");
  const queryField = document.querySelector("#query-field");
  const executeButton = document.querySelector("#execute-button");
  const resultText = document.querySelector("#result-text");

  fileField.addEventListener("change", (event) => {
    const file = fileField.files.item(0);

    if (!file) {
      return;
    }

    const fileReader = new FileReader();

    fileReader.addEventListener("load", (event) => {
      db = new SQL.Database(new Uint8Array(fileReader.result));

      fileField.disabled = true;

      queryField.disabled = false;

      executeButton.disabled = false;
    });

    fileReader.readAsArrayBuffer(file);
  });

  executeButton.addEventListener("click", (event) => {
    const rows = db.exec(queryField.value);

//ここから新しく付け加えたコード
    for (var i in rows) {
      console.log(rows[i].id);
    }
//ここまで新しく付け加えたコード

    resultText.innerHTML = JSON.stringify(rows, null, "  ");
  });
});
</script>

2)を試したところ
fileReader.readAsArrayBuffer(file);の行部分で下記のエラーが出ました。
調べてみたところinputから取得されたものを使用すること前提のものなので実装は難しいのでしょうか？

<div>
  <pre id="result-text"></pre>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.min.js"></script>
<script>
initSqlJs({
  locateFile: (file) => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.1/sql-wasm.wasm`,
}).then((SQL) => {
  let db = null;

  const queryField = document.querySelector("#query-field");
  const executeButton = document.querySelector("#execute-button");
  const resultText = document.querySelector("#result-text");

  const file = "users.sqlite3";
  const fileReader = new FileReader();

  fileReader.addEventListener("load", (event) => {
    db = new SQL.Database(new Uint8Array(fileReader.result));

  });

  fileReader.readAsArrayBuffer(file);


  executeButton.addEventListener("click", (event) => {
    const rows = db.exec("SELECT * FROM users;");

    resultText.innerHTML = JSON.stringify(rows, null, "  ");
  });
});
</script>
コード

↓エラー

Uncaught (in promise) TypeError: Failed to execute 'readAsArrayBuffer' on 'FileReader': parameter 1 is not of type 'Blob'.

該当のソースコード

.
├─ index.html
└─ users.sqlite3

SQLは前回の質問と同様のものになっています。
どうぞよろしくお願いいたします。

Comments

[ku__ra__ge]

「2)閲覧するDBのテーブルは決まっているので、フォルダを選択する手間を無くしたい 」はセキュリティ上の問題で許可されません。 FileReader はユーザーが明示的に選択したファイルのコンテンツにのみアクセスできます。
ユーザー指定していないファイルへアクセスできてしまうと、例えばhtmlを開くだけでハードディスク内のファイル内容を読み取って悪意あるサイトに送信するといった動作が行えてしまうためです。

[tenmusu]

ご返答ありがとうございます。
そういう理由でエラーが出ていたんですね。
何かデータ型の変換をすればいけるんじゃないかと思っていたのですが、 FileReader の根本ついて知ることができて助かりました。ありがとうございます！