Retrieve Name, Size, and Count of Files from Multiple File Input Using JavaScript

Last updated: 13th February 2025

Using the HTML5 file input element, you can easily upload multiple files at once. Simply add the multiple attribute to the <input> element to enable this feature. Often, after incorporating this element into our web page, we need to determine the total number of selected files, along with the name and size of each file. In this post, I'll demonstrate how to retrieve these file details using plain JavaScript.

Show Selected File Details using JavaScript

The Markup with the Script

<!DOCTYPE html>
<html>
<head>
    <title>Get File Details</title>
</head>
<body>
    <p><input type="file" id="file" multiple /></p>
    <p id="fp"></p> <!-- show result here. -->

    <p><input type="submit" value="Show Details" onclick="FileDetails()" ></p>
</body>

<script>
  let FileDetails = () => {
    // Get the file input element.
    const fileInput = document.getElementById('file');

    // Check if files are selected.
    if (fileInput.files.length > 0) {
      // Get the container to display file details.
      const fileDetailsContainer = document.getElementById('fp');

      // Display total file count.
      fileDetailsContainer.innerHTML = 
        `Total Files: <b>${fileInput.files.length}</b><br />`;

      // Create an array to hold file details.
      const fileDetailsArray = Array.from(fileInput.files).map(file => {
        return `${file.name} (<b>${file.size}</b> bytes)`;
      });

      // Join the file details array and display it.
      fileDetailsContainer.innerHTML += fileDetailsArray.join('<br />');
    } 
    else {
      alert('Please select a file.');
    }
  }
</script>
</html>

Try it

Using document.getElementById('file'), we first obtain a reference to the input element. The fi.files property holds a list of selected files as an array. By checking the length of this array, we can ensure that the user has selected at least one file. Once confirmed, we can loop through each file to retrieve its name and size.

← PreviousNext →