I have an input type file but it's in a modal, how to get its files count? I have tried below, but I can't get the value, what did I do wrong?
for (var index = 0; index < document.getElementById('supporting_files').files.length;
index++) {
params.append("supporting_files",
document.getElementById('supporting_files').files[index]);
}
snippet
<div class="modal-dialog modal-dialog-centered modal-dialog- scrollable">
<div class="modal-content">
<div class="modal-body">
<form id="form-pickupModal" method="post" autocomplete="off"
novalidate="novalidate">
<div class="row">
<div class="col">
<div class="form-group">
<label class="form-label" for="supporting_files">Supporting files</label>
<input class="form-control" id="supporting_files" name="supporting_files" type="file" accept=".jpg,.jpeg,.png,.xlsx,.xls,.doc,.docx,.pdf" value="" multiple>
</div>
</div>
</div>
</div>
</div>
</div>
As you see from the above snippet, it's a modal with an input file type there, I don't have an idea on how to get it's value.
You can use length property of FileList to get number of files selected. and use item method to get particular file via index.
function grabFiles() {
console.log('Selected few files');
const files = document.getElementById('all_files').files;
//Note that this files variable is of type FileList and it has a property length
console.log('Number of file selected is: ', files.length);
for (let i = 0; i < files.length; i++) {
console.log(files.item(i));
}
}<input type="file" id="all_files" multiple onchange="grabFiles()" />