How to get files count if the input file type was in a modal?

Question

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.

Answer 1

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()" />