How to get Uploaded File Size Value in JavaScript

Submitted by razormist on Tuesday, January 10, 2023 - 23:05.

How to get Uploaded File Size Value in JavaScript

Introduction

In this tutorial we will create a How to get Uploaded File Size Value in JavaScript. This tutorial purpose is to enable you to display the file size of the uploaded file. This will cover all the basic function that will search a list. I will provide a sample program to show the actual coding of this tutorial.

This tutorial is simple and easy to understand just follow the instruction I provided and you can do it without a problem. This program can be use to any system that needed to display the specific file size. I will give my best to provide you the easiest way of creating this program Display Uploaded File Size Value. So let's do the coding.

Before we get started:

This is the link for the template that i used for the layout design https://getbootstrap.com/.

Creating The Interface

This is where we will create a simple interface to our application. This code will only display upload form and button. To create this simply copy and write it into your text editor, then save it as index.html.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1"/>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
	</head>
<body>
	<nav class="navbar navbar-default">
		<div class="container-fluid">
			<a href="https://sourcecodester.com" class="navbar-brand">Sourcecodester</a> 
		</div>
	</nav>
	<div class="col-md-3"></div>
	<div class="col-md-6 well">
		<h3 class="text-primary">How to get Uploaded File Size Value</h3>
		<hr style="border-top:1px dotted #ccc;"/>
		<div class="col-md-8">
			<div class="form-inline">
				<h4>UPLOAD FILE HERE</h4>
				<input type="file" id="file" class="form-control" style="width:100%;"/>
				<br /><br />
				<button onclick="getFileSize()" class="btn btn-primary">Upload</button>
				<div id="result"></div>
			</div>
		</div>
	</div>
<script src="script.js"></script>
</body>
</html>

Creating JavaScript Function

This is where the main function of the application is. This code will get the file size of the uploaded file from the html input form. To do this just copy and write these block of codes inside the text editor and save it as script.js.

function convertBytes(num) {
	let diff = num < 0;
 
	let units = ['B', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];
 
	if (diff){
		num = -num;
	}
 
	if (num < 1){
		return (diff ? '-' : '') + num + ' B';
	}
 
	let exponent = Math.min(Math.floor(Math.log(num) / Math.log(1000)), units.length - 1);
 
	num = Number((num / Math.pow(1000, exponent)).toFixed(2));
 
	let unit = units[exponent];
 
	return (diff ? '-' : '') + num + ' ' + unit;
}
 
function getFileSize(){
	let file = document.getElementById('file').files[0];
	let fileName = file.name;
	if(file){
		document.getElementById('result').innerHTML = '<h5><strong>Filename:</strong> '+fileName+'</h5><h4>Uploaded file size is <label style="color:blue;">'+convertBytes(file.size)+'</label></h4>';
	}
}

In the code above we will create first a method called convertBytes(), this function will convert the byte size into a compressive format such as kb, gb, mb, etc. And next we will create a method called getFileSize(), in the first line of this function we will bind our file input id so that we can get the actual information of the uploaded file. In order to display the file size to the html page we will just call the convertBytes() function and append the file size of the uploaded file on it.

Output:

The How to get Uploaded File Size Value in JavaScript source code that I provide can be download below. Please kindly click the download button.

There you have it we successfully created How to get Uploaded File Size Value in JavaScript. I hope that this simple tutorial help you to what you are looking for. For more updates and tutorials just kindly visit this site. Enjoy Coding!

More Tutorials for JavaScript Language

JavaScript Tutorials

Add new comment

276 views

How to get Uploaded File Size Value in JavaScript