The FileList interface is a specialized, array-like JavaScript object that web browsers use to securely hold references to one or more local files selected by a user. It acts as an isolation barrier, allowing web applications to read basic metadata—like file names or sizes—and stream the data without giving the underlying code direct access to the user’s local file system. 🛠️ How Browsers Create a FileList
A browser populates and returns a FileList object in two main scenarios:
HTML Input Elements: When an element includes the multiple attribute, a user can select more than one file from their OS picker. The selected items are immediately exposed on the element via element.files.
Drag-and-Drop API: When a user drops items onto a designated drop zone, the browser tracks them using the DataTransfer object. The files are made accessible via event.dataTransfer.files.
Use code with caution. 📋 Core Characteristics of FileList
While FileList looks and behaves similarly to a standard JavaScript Array, it has distinct restrictions designed around web standards and browser security:
Read-Only: You cannot manually push, pop, or splice files directly inside a FileList. The browser controls the object’s contents entirely based on user interaction.
Array-Like, Not an Array: It possesses a .length property and allows indexed item access (e.g., list[0]), but lacks native Array methods like .map(), .forEach(), or .filter().
Conversion to Standard Arrays: To manipulate or iterate over a FileList using standard array methods, developers must convert it into a true JavaScript array using Array.from(fileList) or the spread operator […fileList]. 🧩 Anatomy of the File Object
Every item contained inside a FileList is a File object. To protect user privacy, these objects do not reveal the exact path of the file on the user’s hard drive. Instead, they expose only safe metadata: name: The name of the file (e.g., invoice.pdf). size: The size of the file measured strictly in bytes.
type: The inferred MIME type (e.g., image/jpeg or application/json).
lastModified: A timestamp marking when the file was last altered on disk. 🚀 Processing and Uploading Multiple Files
Once the browser generates the FileList, developers generally handle transmission to a backend server using one of two primary approaches: 1. Native Form Submission (The Single Batch Approach)
Selecting Multiple Files for Upload in Web Page – Stack Overflow