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)
}
})
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