Skip to content

The FileList Object

FULL-STACK WEB DEVELOPMENT BOOTCAMP

2024 COHORT SIGNUPS END TOMORROW

Find out what is a FileList object and how to use it

When you have an HTML Form with an <input type="file" /> element, when one or more files are uploaded by the user you will interact with a FileList object.

That’s not the only place that can give you a FileList object. You will get one also when interacting with Drag and Drop.

Sticking to forms, the input type by default does not allow multiple files to be uploaded.

You will retrieve a FileList with just one element, and you can retrieve it using this syntax:

<input type="file" />
const input = document.querySelector('input')

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

Selecting any element from a FileList object will get a File object. In this case we just have one, so we select the item at position 0.

You can also retrieve it using the item() method, specifying the index:

const input = document.querySelector('input')

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

If multiple is enabled though, using the multiple attribute (<input type="file" multiple />), FileList will contain multiple elements.

You can get the count by looking at the length property of FileList.

This example loads the files uploaded and iterates on them to print each file’s name:

<input type="file" multiple />
const input = document.querySelector('input')

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

  for (let i = 0; i < files.length; i++) {
    const file = files[i]
    alert(file.name)
  }
})
β†’ Read my DOM Tutorial
β†’ Read my Browser Events Tutorial
β†’ Read my Browser APIs Tutorials
h
  • Learn modern web development in my BOOTCAMP (SIGNUP END TOMORROW FEB 20, 2024)
  • THE VALLEY OF CODE (+ PRO), your web development manual
  • I wrote 15+ coding BOOKS, all available in THE VALLEY OF CODE PRO
  • Indie solopreneur internet business masterclass SOLO LAB (summer 2024)