【JavaScript】Web APIインターフェースを使ってみた-其の3:FileReader・FileList
このシリーズについて
「JavaScriptのＷeb APIインターフェースにもっと詳しくなりたい」という思いの下、実際に使ってみたものを紹介しつつ有用性や活用する場面をまとめているシリーズです。
※MDNで多数のAPIとそのインターフェースが公開されています。
今回で3本目の記事ですね。
FileReader・FileList
今回はファイルAPIのインターフェースの【FileReader】と【FileList】を取り上げます。
どんなことができるか
FileReaderについてのポイントは以下の2点です。
- <input type="file">を使用して選択・ドラッグ&ドロップで選択したユーザーのコンピューター内にあるファイル内容にアクセスできる
- 非同期でファイル内容を読み取れる
input要素で選択したファイル情報にPOSTする前にアクセスして読取できる…という感じですね。
また、FileListはinputから選択されたファイルのリストにアクセスできます。
使用した具体例
画像ファイルをアップロードするフォームを作った際に、PCから選択した画像のサムネイルを非同期で表示させたいという時に使いました。
恐らく、これが一番多い使い方である気がします。
FileReaderの頻出プロパティ
- FileReader.result:ファイル内容（読取専用）→読込操作が完了した後に有効になり、読込開始時に後述のどのメソッドを使用したかで中身のデータの型が変わる
FileReaderの頻出メソッド
- FileReader.readAsDataURL():ファイル読込終了時にデータのURLをresultに格納する
- FileReader.readAsText():ファイル読込終了時にファイル内容をテキスト文字列として格納→オプションで文字エンコーディングの指定ができる
その他のプロパティ・メソッドは先述のFileReaderのMDNのページをご参照ください。
コード例
具体例の箇所で書いた、アップロードしたい画像のサムネイルを表示させる例でご紹介します。
// 画像サムネイルをアップロードされたものに変更
const fileInput = document.querySelector(".input-image");
const fileThumbnail = document.querySelector(".image-thumbnail");
if ( fileInput ) {
fileInput.addEventListener("change", (event) => {
const file = event.target.files;
if (file) {
// FileReaderクラスのインスタンス化
const reader = new FileReader();
// 画像ファイルのローカルURLを読み取る
reader.readAsDataURL(file[0]);
reader.onload = () => {
// readerのresultプロパティにあるURLを代入する
fileThumbnail.setAttribute("src", reader.result);
};
}
});
}
input要素に対して、event.target.filesでfileのリストを取得するって書いていますね。
ユーザーがinputで選択したファイルがリストとしてインデックスで格納されているので、FileReaderのメソッドのreadAsDataURLでfile[0]を引数として渡してinput-imageクラスの箇所から読み込まれた画像の単一ファイルを読み込んでいる…みたいな流れです。
読み込まれたデータのURLがreadAsDataURLによってresultに格納→それをサムネイル表示箇所の画像のsrcに入れているという記述ですね。
ここには書いていませんが、image-thumbnailクラスには初期表示として固定のNoImageの画像を表示させているので、挙動としては
NoImageのsrcが入っている
↓ FileReaderでの読込ファイル完了
コンピューターからの選択画像のsrcが入る
↓
非同期処理で選択画像のサムネイルが表示される
…というものが実現できます。
Blobについて
本記事では、特にFileReaderを知る上で役立つBlodについてを割愛していますが、メソッドの部分の理解がより深まるので、気になった方は是非調べてみて下さい。
私も勉強になりました…
こちらの記事の解説がとても分かりやすいです。
使ってみて
記述も短く対応ができて、実装する場面も多そうですね。
ちょっとの差ですが、ユーザー体験にプラスになる機能実装ができると思います。
具体例のような細かな処理にもWeb APIインターフェースが役立っているんですね…
終わりに
今回紹介したFileReaderは非同期でファイル内容を読み取れるというものでしたが、同期的に処理できるFileReaderSyncというインターフェースもありますね。
次回もお楽しみに！
Discussion