FileList（ArrayモドキObject）でもArrayのmapを使いたい！！

結論

FileListはArrayじゃない
Array.fromでArrayに変換する

function handleOnChange(event) {
  const FileList: FileList = event.target.files;
  const files = Array.from(FileList);

  files.map((file) => {
    // 処理
  })
}

解説

FileListとは

下記の様なinput要素でファイルを指定した時にfilesプロパティに入っています。

<input id="imageInput" type="file">

const FileList: FileList = document.getElementById('imageInput').files

// or ReactやVueでonChangeのeventを渡したメソッドの例
function handleOnChange(event) {
  const FileList: FileList = event.target.files;
}

FileListはArrayじゃない

下記のスクショの通り、FileListはArrayではありませんのでmapやfilterの様な関数を使うことが出来ません。

しかし、ファイルを複数枚同時に渡した時にforで回す書き方をやりたくありませんでした。

function handleOnChange(event) {
  const FileList: FileList = event.target.files;
  for (let i = 0; i < FileList.length; i++) {
    const file = FileList[i]
  }
}

Array.fromで配列モドキObjectをArrayに変換する

function handleOnChange(event) {
  const FileList: FileList = event.target.files;
  const files = Array.from(FileList);
  console.log(files)
}

Array.fromを使って下記のようにArrayに変換する事ができました。

FileListをArrayにしてmapを使う

function handleOnChange(event) {
  const FileList: FileList = event.target.files;
  const files = Array.from(FileList);

  files.map((file) => {
    // 処理
  })
}

参考