Solution to “Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator”

Add DOM.Iterable to your tsconfig.json to resolve the TypeScript error "Type 'FileList' must have a '[Symbol.iterator]()' method that returns an iterator"

While working with TypeScript and FileList you may get the TypeScript error Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator.

The error message is being displayed because TypeScript, by default, is unaware of the Iterable DOM elements. One such iterable object is FileList. This indicates that although the FileList in the console appears to be an object, it is actually an iterable. This implies that we may utilize iterator methods on these iterables, such as for...of statement or spread operator (...).

Solution to the error Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator

You may fix the issue by opening your tsconfig.json file and adding DOM.Iterable to the lib array, which informs TypeScript about the types of DOM iterables, including FileList.

{
  "compilerOptions": {
    ...
    "lib": [
      "DOM",
      "DOM.Iterable",
      "ES2022"
    ],
    ...
  }
}

Notes

Iterable definitions are added to several DOM APIs via dom.iterable. If you’re working in a runtime environment that has DOM APIs, you will need DOM definitions. If your runtime environment supports iterable methods on other DOM APIs, you would also include dom.iterable. When using a runtime environment that supports iterable methods on the DOM APIs that allow them, including DOM by itself will result in type errors when attempting to use those iterable methods. It is not possible to include dom.iterable by itself since it expands the dom definitions.