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:

<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];

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.


Logging filenames

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


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


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


const output = document.querySelector('.output');
const fileInput = document.querySelector("#myfiles");

fileInput.addEventListener("change", () => {
  for (const file of fileInput.files) {
    output.innerText += `\n${}`;



File API
# filelist-section
HTML Standard
# dom-input-files-dev

Browser compatibility

BCD tables only load in the browser

See also