I\'m trying to loop through a Filelist
:
console.log(\'field:\', field.photo.files)
field.photo.files.forEach(file => {
// looping code
})
You can also iterate with a simple for:
var files = field.photo.files;
for (var i = 0; i < files.length; i++) {
console.log(files[i]);
}
A FileList
is not an Array
, but it does conform to its contract (has length
and numeric indices), so we can "borrow" Array
methods:
Array.prototype.forEach.call(field.photo.files, function(file) { ... });
Since you're obviously using ES6, you could also make it a proper Array
, using the new Array.from
method:
Array.from(field.photo.files).forEach(file => { ... });
In ES6 you can use:
[...field.photo.files].forEach(file => console.log(file));
Reference: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
Following code is in Typescript
urls = new Array<string>();
detectFiles(event) {
const $image: any = document.querySelector('#file');
Array.from($image.files).forEach((file: any) => {
let reader = new FileReader();
reader.onload = (e: any) => { this.urls.push(e.target.result); }
reader.readAsDataURL(file);
}
}
The lodash library has a _forEach method that loops through all collection entities, such as arrays and objects, including the FileList:
_.forEach(field.photo.files,(file => {
// looping code
})
If you are using Typescript you can do something like this: For a variable 'files' with a type FileList[] or File[] use:
for(let file of files){
console.log('line50 file', file);
}