File Type Validation while Uploading it using JavaScript

Last Updated : 10 Jan, 2025

File type validation is essential for web applications that allow users to upload files. By checking the file extension on the client side using JavaScript, you can provide a smooth and efficient user experience by quickly notifying users if their file isn't supported. This method is often preferred over server-side validation because it reduces server load and provides immediate feedback to users. In this article, we'll learn how to implement file type validation in JavaScript, making it beginner-friendly and easy to understand.

Why Use Client-Side Validation?

Client-side validation is performed in the browser before the data is sent to the server. It improves user experience by providing instant feedback, reduces unnecessary server requests, and helps to prevent errors early. However, it's important to note that client-side validation should complement server-side validation, not replace it, as it can be bypassed.

Implementing File Type Validation Using JavaScript

To validate file types on the client side, we can use a JavaScript function to check the file extension against a list of allowed extensions. Here's a simple approach using the fileValidation() function that leverages regular expressions (regex) to determine if the uploaded file's extension matches the allowed types.

Below examples implement the above approach:

Example 1: In this example we upload file having extensions .jpeg/.jpg/.png/.gif only. We store an extension list in a variable and compare each of them with the uploaded file extension. To separate the extension from the uploaded file we will use regular expression and also preview the uploaded file if the uploaded file extension follows the file type.

HTML

<!DOCTYPE html>
<html>

<head>
	<title>
		File Type Validation while
		Uploading it using JavaScript
	</title>

	<style>
		h1 {
			color: green;
		}
		
		body {
			text-align: center;
		}
	</style>
</head>

<body>
	<h1> 
		GeeksforGeeks 
	</h1>

	<h3> 
		Validation of file type while 
		uploading using JavaScript? 
	</h3>

	<!-- File input field -->
	<p>Upload an Image</p>
	<input type="file" id="file"
		onchange="return fileValidation()" />

	<!-- Image preview -->
	<div id="imagePreview"></div>
	<script>
		function fileValidation() {
			var fileInput = 
				document.getElementById('file');
			
			var filePath = fileInput.value;
		
			// Allowing file type
			var allowedExtensions = 
					/(\.jpg|\.jpeg|\.png|\.gif)$/i;
			
			if (!allowedExtensions.exec(filePath)) {
				alert('Invalid file type');
				fileInput.value = '';
				return false;
			} 
			else 
			{
			
				// Image preview
				if (fileInput.files && fileInput.files[0]) {
					var reader = new FileReader();
					reader.onload = function(e) {
						document.getElementById(
							'imagePreview').innerHTML = 
							'<img src="' + e.target.result
							+ '"/>';
					};
					
					reader.readAsDataURL(fileInput.files[0]);
				}
			}
		}
	</script>
</body>

</html>

Output:

Example 2: Uploading the file having extensions .doc/.docx/.odt/.pdf/.tex/.txt/.rtf/.wps/.wks/.wpd only. Store the extension list in a variable and compare each of them with the uploaded file extension. To separate the extension from the uploaded file we will use a regular expression.

html

<!DOCTYPE html>
<html>

<head>
	<title>
		File Type Validation while
		Uploading it using JavaScript
	</title>

	<style>
		h1 {
			color: green;
		}
		
		body {
			text-align: center;
		}
	</style>
</head>

<body>
	<h1> 
		GeeksforGeeks 
	</h1>

	<h3> 
		Validation of file type while 
		uploading using JavaScript? 
	</h3>

	<!-- File input field -->
	<p>Upload an Image</p>
	<input type="file" id="file"
		onchange="return fileValidation()" />

	<!-- Image preview -->
	<div id="imagePreview"></div>
	<script>
		function fileValidation() {
			var fileInput = 
				document.getElementById('file');
			
			var filePath = fileInput.value;
		
			// Allowing file type
			var allowedExtensions = 
/(\.doc|\.docx|\.odt|\.pdf|\.tex|\.txt|\.rtf|\.wps|\.wks|\.wpd)$/i;
			
			if (!allowedExtensions.exec(filePath)) {
				alert('Invalid file type');
				fileInput.value = '';
				return false;
			} 
		}
	</script>
</body>

</html>