In this tutorial, we will learn how to detect file size before uploading. This guide provides clear step by step instructions to detect file size before uploading.
Introduction
In JavaScript, to detect the file size before uploading, we intercept the file selection event, calculate the file size, and display it to the user, providing immediate feedback on the size of the file they’ve chosen.
Code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Size Detection</title>
</head>
<body>
<!-- Input field for selecting files -->
<input type="file" id="fileInput" onchange="handleFileInput(event)">
<!-- Placeholder for displaying file size -->
<div id="fileSize"></div>
<script>
// Function to handle file input event
function handleFileInput(event) {
// Get the selected files
let fileList = event.target.files;
// Get the element where file size will be displayed
let fileSize = document.getElementById('fileSize');
// Check if files are selected
if (fileList.length > 0) {
// Loop for each selected file
for (let i = 0; i < fileList.length; i++) {
// Get the current file
let file = fileList[i];
// Get the size of the file in bytes
let fileSizeInBytes = file.size;
// Convert file size to kilobytes
let fileSizeInKB = fileSizeInBytes / 1024;
// Convert file size to megabytes
let fileSizeInMB = fileSizeInKB / 1024;
// Display file information
fileSize.innerHTML += "<p>File " + (i + 1) + ": " + file.name + " - Size: " + fileSizeInKB.toFixed(2) + " KB (" + fileSizeInMB.toFixed(2) + " MB)</p>";
}
} else {
// Display a message if no files are selected
fileSize.innerHTML = '<p>No files selected.</p>';
}
}
</script>
</body>
</html>
Output
chose file : no file chosen
chose file : xyz - Size: 3402.50 KB (3.32 MB)
Explanation
The above code begins with a basic HTML skeleton, including the HTML tag, TITLE tag and Body tag. Inside the body section, there’s an input element of type “file” assigned with ID “fileInput.” This input field allows us to select files directly from our devices. Additionally ,it also includes a div element with the ID “fileSize”, which serves as a placeholder for displaying file size information.
Then we call a JavaScript function named handleFileInput(event) which executes automatically when we select a file. This function utilizes the event object event.target.files to access and retrieve the files chosen . Through this event, we can gather information about the selected files, such as their file size. Then, we extract the file size information of the selected file using the size property, which represents the size of the selected file in bytes.
After obtaining the file size in bytes we are converting the file size from bytes to kilobytes by dividing the byte value by 1024. Subsequently, the kilobyte value is further being converted to megabytes by again dividing by 1024. Finally, after completing the size conversion, we are displaying the file size information, alongwith the respective file name within the designated <div> element identified by the ID “fileSize”. If no files are detected, we display a message indicating “No files selected.”