Skip to main content

How to Iterate Over a FileList in JavaScript

When a user selects one or more files from an <input type="file"> element, the browser provides the selections in a FileList object. A common task is to iterate over this list to inspect each file (e.g., check its name, size, or type).

While a FileList looks like an array, it isn't one, so some standard array methods like forEach() are not available on it directly. This guide will teach you the modern, standard methods for iterating over a FileList correctly.

The Core Concept: A FileList is an Iterable, Not an Array​

The files property of a file input gives you a FileList object.

const fileInput = document.getElementById('file-input');
const files = fileInput.files;

console.log(files instanceof Array); // Output: false
note

This is the most important thing to understand. Because it's not a true array, you cannot directly call methods like forEach(), map(), or filter() on it. However, it is an iterable object, which means it is compatible with modern iteration syntax like the for...of loop.

The for...of loop is the modern, standard, and most readable way to iterate over any iterable object, including a FileList.

<input type="file" id="file-input" multiple />

For example, we need to loop through all the files a user has selected and log their details.

Solution:

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;

  // The for...of loop works directly on the FileList.
  for (const file of files) {
    console.log(`--- File Details ---`);
    console.log('Name:', file.name);
    console.log('Size:', file.size, 'bytes');
    console.log('Type:', file.type);
  }
});
note

This is the recommended best practice for simple iteration because of its clarity and directness.

How to Use Array Methods (forEach, map, filter) on a FileList​

If you want to use powerful array methods like forEach, map, or filter, you must first convert the FileList to a true Array.

The logic: you can convert the FileList to an array using either the spread syntax (...) or Array.from(). Both are excellent modern choices.

Solution:

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;

  // Convert the FileList to an array
  const filesArray = Array.from(files);
  // const filesArray = [...files]; // This also works

  // Now you can use any array method, like forEach()
  filesArray.forEach((file, index) => {
    console.log(`File #${index + 1}: ${file.name}`);
  });

  // Or map() to create a new array of just the filenames
  const fileNames = filesArray.map(file => file.name);
  console.log('Filenames:', fileNames);

  // Or filter() to get only large files
  const largeFiles = filesArray.filter(file => file.size > 1024 * 1024); // > 1MB
  console.log('Large files:', largeFiles);
});
note

This two-step process (convert, then iterate) unlocks the full power of JavaScript's array methods for your FileList.

The Traditional Method: The for Loop​

The classic C-style for loop also works because a FileList is "array-like"—it has a length property and its items can be accessed by index.

Solution:

const fileInput = document.getElementById('file-input');

fileInput.addEventListener('change', (event) => {
  const files = event.target.files;

  for (let i = 0; i < files.length; i++) {
    const file = files[i];
    console.log(`File at index ${i}: ${file.name}`);
  }
});
note

While this is perfectly functional, the for...of loop is generally preferred in modern JavaScript for its superior readability.

Conclusion​

Iterating over a FileList is a simple task once you understand its nature as an iterable, array-like object.

  • For simple iteration, the for...of loop is the modern and recommended best practice. It is clean, readable, and works directly on the FileList.
  • If you need to use array-specific methods like forEach(), map(), or filter(), you must first convert the FileList to an Array using Array.from(files) or the spread syntax [...files].

Table of Contents