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

length Read only

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

item() Read only

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

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

• Using files from web applications
• File
• FileReader