JSFiddle - React, Tailwind, and code Playground

by Rikin Patel

HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>File(s) size</title>
</head>

<body>
  <form name="uploadForm">
    <div>
      <input id="uploadInput" type="file" name="myFiles" multiple>
      selected files: <span id="fileNum">0</span>;
      file type: <span id="fileSize"></span>
    </div>
    <div><input type="submit" value="Send file"></div>
  </form>

  <script>
  
function handleFiles() {

  const fileList = this.files; /* now you can work with the file list */
  const numFiles = fileList.length;
  console.log(fileList);
  console.log(numFiles);
  for (let i = 0, numFiles = fileList.length; i < numFiles; i++) {
  const file = fileList[i];
  console.log(file.type);
  
  document.getElementById("fileNum").innerHTML = numFiles;
    document.getElementById("fileSize").innerHTML = file.type;
}

}
  document.getElementById("uploadInput").addEventListener("change", handleFiles, false);
  </script>
</body>
</html>