Skip to content
Advertisement

Select multiple file to upload as populated in html table [closed]

I want to find the number of the file selected as file selection tag is populated in an HTML table every row with a button. I just want to find out the file count (total selected files) when clicking on same row button and upload all selected files

The following code gives an error.

“Uncaught TypeError: Cannot read property ‘length’ of undefined”

function saveValue(data) {
  var fileU = $(data).closest('tr').find('input[type=file]');
  var count = files.length;
  console.log(count);
  for (var i = 0; i < count; i++) {
    var file = fileU[i].files[0];
    console.log(file)
    formData.append("files[]", file);
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td width="10%" align="center" bgcolor="">
      <p data-placement="top" data-toggle="tooltip" title="Attached Letter"><input type="file" class='files' name="files[]" multiple></p>
    </td>
    <td width="40%"><button class="btnSelect" onclick='saveValue(this);'> Count </button></td>
  </tr>
</table>

Advertisement

Answer

This line throws an error

var count = files.length;

"Uncaught TypeError: Cannot read property 'length' of undefined" means that variable files is not defined anywhere.

try to to define it, like this for example:

var files = fileU[0].files;
var count = files.length;
console.log(count);
User contributions licensed under: CC BY-SA
5 People found this is helpful
Advertisement