W3cubDocs

/Web APIs

FileList

An object of this type is 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:

html

<input id="fileItem" type="file" />

The following line of code fetches the first file in the node's file list as a File object:

js

const file = document.getElementById("fileItem").files[0];

Note: 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 use types that wrap around ECMAScript array types instead, so you can treat them like ECMAScript arrays, and at the same time impose additional semantics on their usage (such as making their items read-only).

Instance properties

length Read only

A read-only value indicating the number of files in the list.

Instance methods

item() Read only

Returns a File object representing the file at the specified index in the file list.

Example

Logging filenames

In this example, we log the names of all the files selected by the user.

HTML

html

<input id="myfiles" multiple type="file" />
<pre class="output">Selected files:</pre>

CSS

css

.output {
  overflow: scroll;
  margin: 1rem 0;
  height: 200px;
}

JavaScript

js

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

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
FileList 2 12 3 10 11.1 4 ≤37 18 4 11.1 3.2 1.0
item 2 12 3 10 ≤12.1 4 ≤37 18 4 ≤12.1 3.2 1.0
length 2 12 3 10 11.1 4 ≤37 18 4 11.1 3.2 1.0

See also

© 2005–2023 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/FileList