I want to show names of files after I choose them. So, why is the files list empty in the onchange handler?
Here is my code:
window.onload = function () {
let list = document.getElementById("demo");
let files = document.getElementById("addFileId").files;
document.getElementById("addFileId").onchange = function () {
console.log(files);
console.log(files[0]);
for (let i = 0; i < files.length; i++) {
let li = document.createElement('li');
li.innerText = files[i].name;
list.appendChild(li);
}
};
};<input type="file" multiple class="form-control"
name="file" id="addFileId" required>
<ul id="demo"></ul>The problem is that the file list object is acquired before the change event fires. By the time the event actually happens, information in the list has become stale, while the browser already has attached a new file list to the DOM node. The solution is to obtain the file list inside the event handler:
window.onload = function () {
let list = document.getElementById("demo");
let addFileId = document.getElementById("addFileId");
addFileId.onchange = function () {
let files = addFileId.files;
console.log(files);
console.log(files[0]);
for (let i = 0; i < files.length; i++) {
let li = document.createElement('li');
li.innerText = files[i].name;
list.appendChild(li);
}
};
};
I’ll note, however, that amusingly, the asker’s sample works just fine, unmodified, in Firefox 91 ESR, and commenters describe it acts the same in newer versions as well. Apparently Firefox, instead of creating a new list, updates the existing file list object. Chromium behaves like described in the question; I have not tested a WebKit-based browser, but I imagine it acts like the latter. As of 2022-03-16, the HTML specification says that upon changing the file selection the browser should
Update element's selected files so that it represents the user's selection.
which can be interpreted either way. So it is probably best not to rely on either behaviour.