ローカルファイルを読み取るスニペット

JavaScriptで<input type="file">に入力されたファイルをJavaScript読み取る方法を、何故か毎回忘れる(ここ半年で5回は調べた)のでメモ書きを残しておきます。

基本的な流れ

1. input[type="file"](HTMLInputElement)のfilesプロパティに選択したFileオブジェクトの配列が入る
2. FileReaderを作成しイベントリスナを設定する
3. readAsArrayBuffer()やreadAsText()などでFileオブジェクトをFileReaderに渡す
4. 読み取りが完了するとFileReaderのloadイベントが発火される
5. FileReaderのresultプロパティに結果が入っているので、あとは煮るなり焼くなり
   • ArrayBufferとして読み取り、結果をResponseオブジェクトに入れると使い勝手が良いかも

コード

JavaScript

const readFile = async file => {
	const reader = new FileReader();
	return await new Promise((resolve, reject) => {
		reader.addEventListener("load", _ => resolve(reader.result));
		reader.addEventListener("error", e => reject(e));
		reader.readAsArrayBuffer(file);
	});
};

TypeScript

const readFile = async (file: File) => {
	const reader = new FileReader();
	return await new Promise<ArrayBuffer>((resolve, reject) => {
		reader.addEventListener("load", _ => resolve(reader.result as ArrayBuffer));
		reader.addEventListener("error", e => reject(e));
		reader.readAsArrayBuffer(file);
	});
};

使い方例

document.getElementById("file").addEventListener("input", async e => {
	const files = e.currentTarget.files;
	for (const file of files) {
		const response = new Response(await readFile(file));
		// ...
	}
});