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

結論

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

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

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

解説

FileListとは

https://developer.mozilla.org/ja/docs/Web/API/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に変換する

https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from

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) => {
    // 処理
  })
}

参考

https://developer.mozilla.org/ja/docs/Web/HTML/Element/input/file
https://developer.mozilla.org/ja/docs/Web/API/FileList
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/from
https://qiita.com/xx2xyyy/items/e03033f0a915af207796