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