HTMLInputElement: files property

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⁩.

TheHTMLInputElement.files property allows you to access theFileList selected with the<input type="file"> element.

Value

AFileList object listing the selected files, if any, ornull if theHTMLInputElement is not oftype="file".

Examples

The example below shows how you can access theHTMLInputElement.files property and log the name, date modified, size, and type of each file selected by the user.

HTML

html

<input type="file" multiple />

Note thatHTMLInputElement.files still returns an instance ofFileList even if no files areselected.Therefore it's safe to iterate through it withfor...of without checking if any files are selected.

const fileInput = document.getElementById("files");console.log(fileInput.files instanceof FileList); // true even if emptyfor (const file of fileInput.files) {  console.log(file.name); // prints file name  let fileDate = new Date(file.lastModified);  console.log(fileDate.toLocaleDateString()); // prints legible date  console.log(    file.size < 1000 ? file.size : `${Math.round(file.size / 1000)}KB`,  );  console.log(file.type); // prints MIME type}