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)
}
})
→ I wrote 17 books to help you become a better developer, download them all at $0 cost by joining my newsletter
→ JOIN MY CODING BOOTCAMP, an amazing cohort course that will be a huge step up in your coding career - covering React, Next.js - next edition February 2025