👙
FileList（ArrayモドキObject）でもArrayのmapを使いたい！！
結論
- FileListはArrayじゃない
- Array.fromでArrayに変換する
ex.ts
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">
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に変換する
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) => {
// 処理
})
}
参考
Discussion
JS初心者なのですが、
const FileList: FileList = document.getElementById('imageInput').files
で変数宣言する際に、
「FileList」の後に:(コロン)を付けているのはなぜでしょうか？
あ〜、TypeScriptで型指定していたコードをコピペした名残ですね。
紛らわしくてすみません。