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

結論

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

ex.ts

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">

ex.ts

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で回す書き方をやりたくありませんでした。

ex.ts

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

ex.ts

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

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

FileListをArrayにしてmapを使う

ex.ts

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