ブラウザにドラッグ＆ドロップされたSQLite3ファイルを解析して内容を表示する。

ブツ

eyecatch.png

前回まで

情報源

コード抜粋

ポイントは以下。ロードしたいSQLite3のファイルの内容をcontentとして渡せばいい。

const db = new this.SQL.Database(content);

contentはドラッグ＆ドロップで取得するようにした。

dropZone.addEventListener('drop', async(e)=>{
    var files = e.dataTransfer.files;
    if (files.length > 1) { return Toaster.toast('アップロードできるファイルは1つだけです。', true); }
    fileInput.files = files;
    const fr = new FileReader();
    fr.readAsArrayBuffer(files[0])
    fr.onload = async()=>{ await this.#preview(new Uint8Array(fr.result)) }
}, false);

FileReaderでreadAsArrayBufferするとfr.resultにファイル内容が入る。それをUint8Arrayによってバイナリデータ化したものをSQL.Database(content)で渡す。

async #preview(content) {
  if (!this.SQL) {
      this.SQL = await initSqlJs({locateFile: file => `https://cdnjs.cloudflare.com/ajax/libs/sql.js/1.6.2/${file}`})
  }
  const db = new this.SQL.Database(content);
  let res = JSON.stringify(db.exec(`SELECT sqlite_version();`));
  ...

あとはそのDBファイルの中身を好きなようにSQL文で取得するなり追記するなりすればいい。

所感

ファイルを何度も読み書きするとき、ダウンロードするだけでは不足。もっとこう、直接ファイル操作できるような方法はないものか。次回やってみる。