Get the data of uploaded file in javascript


Mar 3, 2019

Here is the most important article for us to check the file info before sending file to the server. So, in this tutorial, I will show you how to get file info before uploading in JavaScript.

If you tries to upload file that exceed the size limit, then the app must display a message, telling the user not to exceed the limit. Likewise, you can do many useful things with the size of the files, such as, convert the bytes to Kilobytes etc.

The File type

name – the filename

size – the size of the file in bytes

type – the MIME type for the file

File Name Using JavaScript:


document.getElementById('fileName').files[0].name;

File Size Using JavaScript:


document.getElementById('fileName').files[0].size;

File Type Using JavaScript:


document.getElementById('fileName').files[0].type;

Full Code:


<html>
<head>
<title>Get the data of uploaded file in javascript</title>
</head>
<body>
	<input type="file" id="fileName" onchange="getInfo()"/>
	<p id="fileinfo"></p>
	<script>
		function getInfo(){
			var Size = document.getElementById('fileName').files[0].size;
			var Name = document.getElementById('fileName').files[0].name;
			var Type = document.getElementById('fileName').files[0].type;
			
			var fileinfo = 'File Name: '+Name+"<br/> File Size: "+Size+"<br/> File Type: "+Type;
			document.getElementById('fileinfo').innerHTML = fileinfo;
		}
	</script>
</body>
</html>

Copyright 2018. All rights are reserved