2025/01/23

日記

　ファイルを取り込むページを作っていた。（まぁChatGPTに頼り切りなのだけれども。）
ChatGPT曰く、ファイルを読み込む時にはArrayBufferで読み込むっぽい(というか今回使おうとしていた関数がArrayBufferを受け取るものだったから使おうとした。)けれども、ArrayBufferにはサイズ制限があるhttps://stackoverflow.com/questions/17823225/do-arraybuffers-have-a-maximum-length, https://bugzilla.mozilla.org/show_bug.cgi?id=1392234ので、これは使えない。
結局streamの形で読み込めるライブラリを借りて、ReadableStreamを使うことで解決した。

　コードとしては、

hoge = await hoge.create();
hoge.init();

const stream = file.stream();
const reader = stream.getReader();
let done = false;

while (!done) {
  const { value, done: streamDone } = await reader.read();
  if (value) {
    hoge.update(value);
  }
  done = streamDone;
}

という感じ。

あと、ドラッグ&ドロップのときにブラウザのデフォルト動作を止めるには、

document.addEventListener('dragover', (event) => {
  event.preventDefault();
});

document.addEventListener('drop', async (event) => {
  event.preventDefault();

  // なにかする。
  // documentを見ているので、ここで処理すれば、ページどこでもドラッグアンドドロップできるようになる。
}

とすれば行けるっぽい。