FileList

The FileList object is a web API interface that represents an isolated, read-only list of file objects. It is most commonly encountered when a user selects files using an HTML element or drops files onto a webpage using the Drag and Drop API. 🔑 Key Characteristics

Read-Only: You cannot add, remove, or replace files directly inside a FileList object.

Array-Like: It looks like an array and has a .length property, but it is not a true JavaScript Array.

Zero-Indexed: The first selected file is stored at index 0, the second at index 1, and so on. 💻 Properties and Methods

length: A read-only property that returns the total number of files in the list.

item(index): A method that returns the File object at the specified index.

Bracket Notation [index]: A more common alternative to .item(), allowing you to access files like a standard array (e.g., fileList[0]). 📝 Code Example

Here is how you capture and inspect a FileList when a user uploads files:

Use code with caution. 💡 Pro-Tip: Converting to a Real Array

Because FileList is not a true array, you cannot use modern array methods like .map(), .filter(), or .forEach() directly on it. To use these methods, convert the FileList into a standard JavaScript array using one of these techniques: javascript

// Method 1: Using Array.from() const fileArray1 = Array.from(files); // Method 2: Using the spread operator const fileArray2 = […files]; Use code with caution.