How to Get File Info (name, size, type) in JavaScript

Before sending the file to the server for upload, it always a good idea to validate the file. Using JavaScript you can easily get the file info and validate in client-side. The following single line of javaScript code, help you to get the file name, size, type, and modified date.

Get File Name in JavaScript:

document.getElementById('file').files[0].name

Get File Size in JavaScript:

document.getElementById('file').files[0].size

Get File Type in JavaScript:

document.getElementById('file').files[0].type

Get File Modified Date in JavaScript:

document.getElementById('file').files[0].lastModifiedDate

You can use the following code to get the file information after selecting a file.
HTML:

<input type="file" id="file" onchange="fileInfo()"/>

JavaScript:

function fileInfo(){
    var fileName = document.getElementById('file').files[0].name;
    var fileSize = document.getElementById('file').files[0].size;
    var fileType = document.getElementById('file').files[0].type;
    var fileModifiedDate = document.getElementById('file').files[0].lastModifiedDate;
    
    var file_info = fileName+"\n"+fileSize+"\n"+fileType+"\n"+fileModifiedDate;
    alert(file_info);
}