267

I'm trying to loop through a Filelist:

console.log('field:', field.photo.files)
field.photo.files.forEach(file => {
   // looping code
})

As you can see field.photo.files has a Filelist:

enter image description here

How to properly loop through field.photo.files?

4
  • 3
    Array.prototype.forEach.call(field.photo.files, file => console.log(file)); Dec 1, 2016 at 4:04
  • It's not an array? Is this node.js?
    – connexo
    Dec 1, 2016 at 4:05
  • @connexo: No, field.photo.files is an object prototyped on FileList; just like HTMLCollection, it does not have Array.prototype in its prototype chain.
    – Amadan
    Dec 1, 2016 at 4:12
  • Simple for loop work :)
    – Reza
    Jun 30, 2020 at 13:46

8 Answers 8

443

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 => { ... });
7
  • Strange, I get this: Building.vue?92ca:292 Uncaught (in promise) TypeError: Cannot convert undefined or null to object(…) with Array.from.
    – alex
    Dec 1, 2016 at 6:21
  • Well, are you sure your variable is field.photo.files? I wasn't checking that...
    – Amadan
    Dec 1, 2016 at 6:23
  • 30
    you can also use the spread operator [...field.photo.files].map(file => {}); Mar 30, 2018 at 2:13
  • 1
    Are there any downsides to "borrowing" the forEach method? 🤔
    – mcjlnrtwcz
    Mar 15, 2021 at 11:25
  • 1
    @mcjlnrtwcz I can't think of anything, except legibility.
    – Amadan
    Mar 16, 2021 at 7:52
60

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]);
}
1
  • 1
    Lint does not like this.
    – Heiner
    Aug 18, 2022 at 7:27
53

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

2
  • This is not a destructuring assignment. It’s spread syntax. It will create a new array just for this operation.
    – Daniel B
    Feb 7, 2022 at 20:09
  • I realise the original question wasn't about map() but 95% of my array iterations are map/filter/some etc. so this would be my preferred solution
    – Andy
    Apr 8, 2022 at 16:19
6

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
})
2

The 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);
   }
}
1

Use for...of loop:

for (const file of fileList) {
  // ...
}
0

from https://developer.mozilla.org/en-US/docs/Web/API/FileList

  for (const file of fileInput.files) {
    output.innerText += `\n${file.name}`;
  }

in this case

  for (const file of field.photo.files) {
    //some code
  }
-6

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);
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.