When you are implementing any functionality that is related to the FileList such as Drag and Drop or File select in Angular 12, then TypeScript may show you an error message saying Type ‘FileList’ must have a ‘[Symbol.iterator]()’ method that returns an iterator error.

That reason for this error message is, the default interfaces included in the TypeScript through ‘dom’ configuration does not know that the FileList is of Iterable Object type and do have ‘Symbol.iterator’ method implemented on it. To add these additional interfaces, we can the tsconfig.json file and add the following entry to the lib property.

example:

Copy to Clipboard

 

If you do not have control over the tsconfig file and must have to solve the problem inside the component, then for now, you can use the not-recommended way by using any data type.

example:

Copy to Clipboard