File type Validation in JavaScript

Validating the extensions of a file before uploading it can be a crucial part of form validation. By checking the file extensions, you can ensure that the uploaded files meets your specific requirements. In this article, we will discuss  how to validate all file type or extension using java script.

  • File Input HTML Element
  • File Type Validation in JavaScript
  • Handling Invalid File Types
  • Displaying Error Messages
  • Checking for Multiple File Types

Create new html file

    At first you have create new html file in your specific path . Then open the html file that will display the data and add the following code

index.html

<!DOCTYPE html>
<html>
<head>
<title>File validation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>

<body>
<div class="page-wrapper">
<div class="content container-fluid">

<div class="page-header">
<div class="row">
<div class="col-sm-7 col-auto">
<h3 class="page-title">File</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item active">File</li>
</ul>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">


<form action="#" method="post" enctype="multipart/form-data">
<div class="row form-row">

<div class="row">
    <div class="col-md-6">
    <div class="form-group">
        <label>Photo <span class="text-danger">*</span></label>
        <input type="file" name="photo" id="photo"  class="form-control" required >
        <span>Upload .jpg/.png only.</span>
        <div id="msg3"></div>
    </div>
    </div>
    <div class="col-md-6">
    <div class="form-group">
        <label>Resume <span class="text-danger">*</span></label>
        <input type="file" name="resume" id="resume"
        class="form-control" >
        <span>Upload .doc/.docx/.pdf only.</span>
        <div id="msg2"></div>
    </div>
    </div>
</div>

<div class="col-lg-2 col-xl-2 col-sm-12">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" onclick="return send(); name="save" value="Save Changes" >
</div>
</div>
</form>



</div>
</div>
</div>
</div>
</div>
</div>

</body>
</html>

Define Validation Rules and Error Message

Then, define the validation rules of  file extension before uploading use to sample syntax

File Type or File Extensions Validation in JavaScript 


<script>
    //File Validate
    function send() {
            var fileInputresume = document.getElementById('resume');
            var fileInputphoto = document.getElementById('photo');
             
            var filePath = fileInputresume.value;
            var filePath1 = fileInputphoto.value;
         
            // Allowing file type
            var allowedExtensions =  /(\.doc|\.docx|\.pdf)$/i;
            var allowedExtensions1 =  /(\.jpg|\.png)$/i;
            if(!allowedExtensions1.exec(filePath1))
            {
                var msg3 = '<span style="color:red;">Please upload file having extensions .jpg/.png only.</span><br /><br />';
                document.getElementById('msg3').innerHTML = msg3;
                    return false;
                fileInputphoto.value = '';
                return false;
            }
            else if (!allowedExtensions.exec(filePath)) {
                var msg2 = '<span style="color:red;">Please upload file having extensions .doc/.docx/.pdf only.</span><br /><br />';
                document.getElementById('msg2').innerHTML = msg2;
                    return false;
                fileInputresume.value = '';
                return false;
            }
           
            else{
                document.getElementById('msg2').innerHTML = '';
                document.getElementById('msg3').innerHTML = '';
            }
        }
       
 </script>


Handling Invalid File Types 


var allowedExtensions =  /(\.doc|\.docx|\.pdf)$/i;
var allowedExtensions1 =  /(\.jpg|\.png)$/i;
if(!allowedExtensions1.exec(filePath1))
{
    var msg3 = '<span style="color:red;">Please upload file having extensions .jpg/.png only.</span><br /><br />';
    document.getElementById('msg3').innerHTML = msg3;
        return false;
    fileInputphoto.value = '';
    return false;
}
else if (!allowedExtensions.exec(filePath)) {
var msg2 = '<span style="color:red;">Please upload file having extensions .doc/.docx/.pdf only.</span><br /><br />';
document.getElementById('msg2').innerHTML = msg2;
    return false;
fileInputresume.value = '';
return false;
}
 

Displaying Error Messages 


  <div id="msg2"></div>
 

Full Source Code 


<!DOCTYPE html>
<html>
<head>
<title>File validation</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
</head>

<body>
<div class="page-wrapper">
<div class="content container-fluid">

<div class="page-header">
<div class="row">
<div class="col-sm-7 col-auto">
<h3 class="page-title">File validation</h3>
<ul class="breadcrumb">
<li class="breadcrumb-item"><a href="#">Dashboard</a></li>
<li class="breadcrumb-item active">File validation</li>
</ul>
</div>
</div>
</div>

<div class="row">
<div class="col-sm-12">
<div class="card">
<div class="card-body">


<form action="#" method="post" enctype="multipart/form-data">
<div class="row form-row">

<div class="row">
    <div class="col-md-6">
    <div class="form-group">
        <label>Photo <span class="text-danger">*</span></label>
        <input type="file" name="photo" id="photo"  class="form-control" required >
        <span>Upload .jpg/.png only.</span>
        <div id="msg3"></div>
    </div>
    </div>
    <div class="col-md-6">
    <div class="form-group">
        <label>Resume <span class="text-danger">*</span></label>
        <input type="file" name="resume" id="resume"
        class="form-control" onchange="return fileValidation()" >
        <span>Upload .doc/.docx/.pdf only.</span>
        <div id="msg2"></div>
    </div>
    </div>
</div>

<div class="col-lg-2 col-xl-2 col-sm-12">
<div class="form-group">
<input type="submit" class="btn btn-primary btn-block" onclick="return send(); name="save" value="Save Changes" >
</div>
</div>
</form>




</div>
</div>
</div>
</div>
</div>
</div>


<script>
    //File Validate
    function send() {
            var fileInputresume = document.getElementById('resume');
            var fileInputphoto = document.getElementById('photo');
             
            var filePath = fileInputresume.value;
            var filePath1 = fileInputphoto.value;
         
            // Allowing file type
            var allowedExtensions =  /(\.doc|\.docx|\.pdf)$/i;
            var allowedExtensions1 =  /(\.jpg|\.png)$/i;
            if(!allowedExtensions1.exec(filePath1))
            {
                var msg3 = '<span style="color:red;">Please upload file having extensions .jpg/.png only.</span><br /><br />';
                document.getElementById('msg3').innerHTML = msg3;
                    return false;
                fileInputphoto.value = '';
                return false;
            }
            else if (!allowedExtensions.exec(filePath)) {
                var msg2 = '<span style="color:red;">Please upload file having extensions .doc/.docx/.pdf only.</span><br /><br />';
                document.getElementById('msg2').innerHTML = msg2;
                    return false;
                fileInputresume.value = '';
                return false;
            }
           
            else{
                document.getElementById('msg2').innerHTML = '';
                document.getElementById('msg3').innerHTML = '';
            }
        }
       
 </script>


</body>
</html>

Finally enter your project url in browser

Conclusion

    We hope this guide has been helpful. If you have any questions or need further assistance, Please feel free to comment below, your suggestion and problems if you face - we are here to solve your problems.