<input type="file" id="fileInput">
<div id="fileInfo"></div>
document.getElementById('fileInput').addEventListener('change', function(event) {
    var file = event.target.files[0];
    var fileInfo = `
      <p>File Name: ${file.name}</p>
      <p>File Size: ${file.size} bytes</p>
      <p>File Type: ${file.type}</p>
    `;
    document.getElementById('fileInfo').innerHTML = fileInfo;
  });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.