When the user selects files with an <input type="file" />, you get a FileList. You also get a FileList from the Drag and Drop API.

Without the multiple attribute, the user can select only one file, so the FileList has one item. Example:

<input type="file" />

const input = document.querySelector('input')

input.addEventListener('change', (e) => {
  const fileList = input.files
  const theFile = fileList[0]
})

Accessing an item in a FileList returns a File object. Use index 0 for the first file. You can also use the item(index) method:

const input = document.querySelector('input')

input.addEventListener('change', (e) => {
  const fileList = input.files
  const theFile = fileList.item(0)
})

With the multiple attribute (<input type="file" multiple />), the user can select multiple files. Use the length property to get the count.

Example: iterate over the selected files and show each file name:

<input type="file" multiple />

const input = document.querySelector('input')

input.addEventListener('change', (e) => {
  const files = input.files
  const filesCount = files.length

  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    alert(file.name)
  }
})

Lessons in this unit:

0:	Introduction
1:	The File object
2:	▶︎ FileList
3:	FileReader
4:	Blob
5:	FormData
6:	Accept only images in file input
7:	Check if checkbox is checked
8:	Reset a form
9:	File upload with server handling
10:	Drag and drop file upload
11:	Validating file size before upload