FileList
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Note: This feature is available in Web Workers.
The FileList interface represents an object of this type returned by the files property of the HTML <input> element; this lets you access the list of files selected with the <input type="file"> element. It's also used for a list of files dropped into web content when using the drag and drop API; see the DataTransfer object for details on this usage.
All <input> element nodes have a files attribute of type FileList on them which allows access to the items in this list. For example, if the HTML includes the following file input:
<input id="fileItem" type="file" />
The following line of code fetches the first file in the node's file list as a File object:
const file = document.getElementById("fileItem").files[0];
This interface was an attempt to create an unmodifiable list and only continues to be supported to not break code that's already using it. Modern APIs represent list structures using types based on JavaScript arrays, thus making many array methods available, and at the same time imposing additional semantics on their usage (such as making their items read-only).
These historical reasons do not mean that you as a developer should avoid FileList. You don't create FileList objects yourself, but you get them from APIs such as HTMLInputElement.files, and these APIs are not deprecated. However, be careful of the semantic differences from a real array.
Instance properties
lengthRead only-
A read-only value indicating the number of files in the list.
Instance methods
Example
Logging filenames
In this example, we log the names of all the files selected by the user.
HTML
<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>
CSS
.output {
overflow: scroll;
margin: 1rem 0;
height: 200px;
}
JavaScript
const output = document.querySelector(".output");
const fileInput = document.querySelector("#myfiles");
fileInput.addEventListener("change", () => {
for (const file of fileInput.files) {
output.innerText += `\n${file.name}`;
}
});
Result
Specifications
| Specification |
|---|
| File API # filelist-section |
| HTML # dom-input-files-dev |
Browser compatibility
| desktop | mobile | server | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
FileList
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
item
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
length
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support