Checking File Size on Upload in JavaScript

In this tutorial, you'll learn how to check the file size of an uploaded file in JavaScript. Here, we'll set up the HTML form and the JavaScript to handle the file input.

Setting up the HTML Form

First, we'll create an HTML form that includes a file input element. This form will allow users to select a file from their device to upload.

<form id="upload">
	<div id="message"></div>
	<input type="file" id="file" />
	<button type="submit">Upload</button>
</form>

In the HTML, we have a file input field and a submit button inside a form. We also have a division element to display messages to the user.

Writing the JavaScript

Next, we'll write the JavaScript to handle the file input, check the file size, and report a message back to the user:

document.getElementById("upload").addEventListener("submit", function(event) {
	event.preventDefault();
	
	let file = document.getElementById("file");
	let message = document.getElementById("message");
	let max_size = 2 * 1024 * 1024;
	
	if (file.files.length === 0) {
		message.textContent = "Please select a file.";
		message.style.color = "red";
		return false;
	}
	
	if (file.files[0].size > max_size) {
		message.textContent = "File size exceeds 2 MB.";
		message.style.color = "red";
	}
	else {
		message.textContent = "File is within the size limit. Ready to upload!";
		message.style.color = "green";
	}

	// Here, you can add the code to handle the file upload
	// For example, you could use XMLHttpRequest or fetch API to upload the file to a server
});

Code Explanation

• Event Listener: We add an event listener to the form to handle the submit event. We use event.preventDefault() to prevent the form from submitting, allowing us to check the file size first.
• File Input Check: We check if a file is selected by accessing file.files. If no file is selected, we'll display a message and exit the function.
• File Size Check: We get the selected file using file.files[0]. We then define the maximum file size limit (in bytes). In this example, we set the limit to 2 MB (2 * 1024 * 1024 bytes).
• Display Message: We compare the file size with the maximum size limit. If the file size exceeds the limit, we display an error message in red. Otherwise, we display a success message in green.
• Handle Upload: If the file is within the size limit, we can add code to handle the file upload, either using the XMLHttpRequest or fetch API to send the file to a server. For simplicity, this tutorial focuses only on checking the file size.

Conclusion

With this tutorial, you now have a basic understanding of how to check the file size of an uploaded file in JavaScript on the client side. This ensures that users can only upload files that meet your size requirements, improving the user experience and preventing potential issues with large file uploads. Have fun!