Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
JavaScript WebAPI File File.size Property
The JavaScript File WebAPI size property returns the size of a file in bytes. This read-only property is useful for validating file sizes before upload or displaying file information to users.
Syntax
file.size
Return Value
Returns a number representing the file size in bytes.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Size Property</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
padding: 20px;
}
.result {
font-size: 18px;
font-weight: 500;
color: #333;
margin: 20px 0;
padding: 10px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
input[type="file"] {
margin: 10px 0;
padding: 5px;
}
</style>
</head>
<body>
<h1>JavaScript file.size Property</h1>
<input type="file" class="fileInput">
<p>Upload a file using the above input to get its size information</p>
<div class="result">No file selected</div>
<script>
const resultEle = document.querySelector(".result");
const fileInput = document.querySelector(".fileInput");
fileInput.addEventListener("change", (event) => {
const file = event.target.files[0];
if (file) {
const sizeInBytes = file.size;
const sizeInKB = (sizeInBytes / 1024).toFixed(2);
const sizeInMB = (sizeInBytes / (1024 * 1024)).toFixed(2);
resultEle.innerHTML = `
<strong>File Information:</strong><br>
Name: ${file.name}<br>
Size: ${sizeInBytes} bytes<br>
Size: ${sizeInKB} KB<br>
Size: ${sizeInMB} MB
`;
} else {
resultEle.innerHTML = "No file selected";
}
});
</script>
</body>
</html>
Common Use Cases
The size property is commonly used for:
- File size validation before upload
- Displaying file information to users
- Calculating upload progress
- Preventing large file uploads
File Size Validation Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Size Validation</title>
<style>
.error { color: red; }
.success { color: green; }
</style>
</head>
<body>
<h2>File Upload with Size Validation</h2>
<input type="file" id="fileUpload">
<div id="message"></div>
<script>
document.getElementById("fileUpload").addEventListener("change", function(event) {
const file = event.target.files[0];
const messageDiv = document.getElementById("message");
const maxSize = 2 * 1024 * 1024; // 2MB limit
if (file) {
if (file.size > maxSize) {
messageDiv.innerHTML = `<p class="error">File too large! Size: ${(file.size / (1024*1024)).toFixed(2)}MB. Maximum allowed: 2MB</p>`;
} else {
messageDiv.innerHTML = `<p class="success">File accepted! Size: ${file.size} bytes (${(file.size / 1024).toFixed(2)} KB)</p>`;
}
}
});
</script>
</body>
</html>
Browser Compatibility
The File.size property is supported in all modern browsers including Chrome, Firefox, Safari, and Edge. It's part of the File API specification and has been widely supported since HTML5.
Conclusion
The File.size property provides an easy way to get file sizes in bytes for validation and display purposes. It's essential for creating user-friendly file upload interfaces with proper size constraints.
Updated on: 2026-03-15T23:18:59+05:30
140 Views
Advertisements