Skip to content

The FileList Object

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)
  }
})
→ Download my free JavaScript Handbook!

THE VALLEY OF CODE

THE WEB DEVELOPER's MANUAL

You might be interested in those things I do:

  • Learn to code in THE VALLEY OF CODE, your your web development manual
  • Find a ton of Web Development projects to learn modern tech stacks in practice in THE VALLEY OF CODE PRO
  • I wrote 16 books for beginner software developers, DOWNLOAD THEM NOW
  • Every year I organize a hands-on cohort course coding BOOTCAMP to teach you how to build a complex, modern Web Application in practice (next edition February-March-April-May 2024)
  • Learn how to start a solopreneur business on the Internet with SOLO LAB (next edition in 2024)
  • Find me on X

Related posts that talk about browser: