MDN Web Docs

Instance properties

length Read only

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

Instance methods

item()

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

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

Browser compatibility

See also

Help improve MDN

Yes No

Learn how to contribute

This page was last modified on by MDN contributors.

Read the original on developer.mozilla.org ↗